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// 创建 电炉 

Let range = new Range(RangeType.Electric); 
/ / 创建 炊具 

Let pan = new Pan("cast 1iron"); 

Let skillet = new Pan("cast 1Tron" ) ; 

Let pot = new Pot("stainless steel"); 

let tray = new Tray("aluminum"); 





// 炖 牛肉 

pot.add (water ) ; RangeType.Gas RangeType.Electric 
potsadd(brothn)s mY ttt 

pot .add(red_wine) ; | 00 0 0 0 0 0O 0 
pot .add(beef) ; 
pot .SQLPOELEaEO = \ 
Do .addi(earrot 

pot.add(bay_leaf); 
pot.add(peppercorn); 
pot ,ealories()s: Ay 576.35 
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// 创建 电炉 

Let range = new Range(RangeType.ELectric) ; 
/ / 创建 炊具 

Let pan = new Pan("cast iron'" ) ; 

Let skillet = new Pan("cast iron'" ) ; 

Let pot = new Pot("stainless steel"); 

Let tray = new Tray("aLuminum" ) ; 


// 炖 牛肉 
pot .add(water ) ; RangeType Gas RangeType Electric 
pot .add(broth ) ; bebe bh 
pot.add(red_wine); | 0 0 0O 0 | 00 O 0 
pot.add (beef); 
pot .add(potato ) ; 
pot.add(carrot); 
pot.add(bay_leaf); 
pot.add(peppercorn); 

CalorTes()s // 576s35 
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有 本 


人 们 通常 认为 只 有 软件 产品 和 服务 才 具 有 “特性 ”。 例 如 ，Instagram 和 Twitter 等 现代 App 
者 具有“ 关注” 特性， 上 传 照 片 也 是 一 个 特性 。 但 是 ， 计 算 机 语言 也 拥有 特性 ， 如 函数 、for 循 
环 和 class 关键 字 都 是 计算 机 声言 的 特性 。 


在 JavaScript 中 ， 虽 然 某 些 特性 借鉴 目 其 他 语言 ， 但 大 多 数 特 性 为 这 门 语 言 所 独 有 。 举 例 
来 说 ，this、class、const 等 特性 虽然 表面 上 类 似 于 原始 的 C++ 实现 ， 但 在 许多 情况 下 ， 它 们 
的 用 法 体现 了 JavaScript 的 特点 。JavaScript 是 一 门 不 断 进化 的 语言 。 在 ECMAScript 6 ( 以 下 条 
称 ES6 ) 于 2015 年 6 月 发 布 后 ,该 语言 的 新 特性 如 “ 寒 武 纪 大 爆发 ”0 一般, 出 现 了 爆发 式 增长 ， 
这 彻底 改变 了 JavaScript 代码 的 编写 方式 。 尺 管 ，. .rest 语法 、.. .spread 语法 、 租 头子 数 、 模 
板 字 符 串 、 对 象 解构 等 新 特性 在 如 今 的 JavaScript 代码 中 已 经 很 常见 ， 但 在 数 年 之 前 ， 束 连 拥 有 
十 多 年 JavaScript 编程 经 验 的 开发 人 员 也 难以 接受 这 些 概念 。 隐 数 式 编程 迅速 受到 JavaScript 社 
x 青睐， 针对 数组 的 高 阶 也 数 ( map 、filter、reduce ) 在 多 年 之 后 终于 得 到 了 普及 。 


JavaScript 是 一 门 多 范式 语言 。 它 引入 了 class 关键 字 和 单独 的 构造 函数 ， 用 于 替代 传统 的 
咀 数 构造 硕 。 因 此 ， 拥 有 传统 的 面 品 对 象 编程 经 验 的 开发 人 员 可 以 很 快 熟 悉 该 语言 。ES6 规范 
众生 了 一 类 全 新 的 程序 员 ， 他 们 更 尊重 这 门 曾经 被 用 来 编写 原始 DOM 脚本 的 语言 。 由 于 在 浏 
览 天 中 运行 的 JavaScript 引擎 (如 Chrome 浏览 大 的 V8 ) 得 到 充分 发 展 ，JavaScript 不 再 被 看 作 
俐 单 的 脚本 语言 。 对 于 JavaScript 开发 来 说 ， 这 是 一 个 全 新 的 时 代 。 如 今 ， 你 经 常会 在 互联 网 上 
发 现 标题 类 似 于 “使 用 JavaScript 创建 机 融 人 ”的 视频 。 我 们 甚至 仅 使 用 JavaScript 就 能 创建 可 
以 在 Windows 10 中 运行 的 早 面 应 用 程序 。 


JavaScript 的 框架 和 库 ( 如 React 和 Vue ) 隐藏 了 一 些 传 统 的 语言 细节 。 这 虽然 有 助 于 更 快 
速 地 创建 模块 化 的 应 用 程序 ， 却 通常 会 让 初学 者 误 以 为 不 必 理 解 JavaScript 的 基本 语法 。 本 书 精 
心 挑选 了 一 些 符 合 目 然 认 知 规律 的 话题 ， 帮 助 你 逐步 掌握 JavaScript 的 语法 ， 同 时 本 书 内 容 尽 量 
忠实 于 JavaScript 规范 的 动态 性 。 


最 后 ， 衷 心 而 望 本 书 能 够 激励 你 今后 进一步 学 习 更 高 级 的 内 容 。 






























































CO) 寒 武 纪 大 爆发 (Cambrian Explosion ) ， 指 寒 武 纪 ( 距 今 约 5 亿 4200 万 年 到 5 亿 3000 万 年 ) 地 层 在 其 几 百 万 年 时 间 
内 突然 出 现 的 门类 众多 的 无 消 椎 动物 化 石 。 编者 注 
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本 书 的 结构 连贯 ， 建 议 从 头 至 尾 依次 阅读 。 不 过 ， 你 也 可 以 将 本 书 作为 参考 书 ， 在 需要 时 
查看 各 个 示例 。 





本 书 并 不 是 完整 的 JavaScript 参考 手册 。 但 是 ， 这 未 尝 不 是 一 件 好 事 。 本 书 只 关注 对 现代 
JavaScript 环境 重要 的 内 容 ， 包 括 import 关键 字 、 类 、 构 造 函 数 ， 以 及 孔 数 式 编程 的 主要 原则 ， 
此 外 还 会 介绍 ES5 ~ ES10 的 诸多 特性 。 各 个 “ES 规范 ”之 间 的 区 别 已 经 不 再 那么 重要 ， 因 为 
它们 都 是 JavaScript 规范 。 本 书 之 所 以 加 以 区 分 ， 只 是 为 了 让 你 对 此 有 一 定 的 认识 。 








你 会 在 书 中 看 到 这 样 的 图 标 。 这 表示 该 特性 作为 ES10 规 范 的 一 部 分 被 引入 JavaScript 中。 








JavaScript 的 内 容 有 难 有 易 ， 其 中 有 一 些 基 于 无 形 的 思想 或 原则 ， 无 法 仅 通 过 源 代 码 讲解 。 
在 本 书 中 ， 你 会 发 现 有 许多 创造 性 的 讲解 方式 ， 这 会 让 学 习 过 程 更 简单 一 些 、 更 有 趣 一 些 。 彩 
色 代 码 图 就 是 一 个 例子 。 











1.1 理论 


虽然 并 不 是 所 有 的 内 容 都 需要 广泛 的 理论 文 持 ， 但 是 茶 些 内 容 如 打 没 有 广泛 的 理论 文 持 台 
会 变 得 野 无 意义 。 为 了 便于 全 面 理解 菜 些 概念 ， 本 书 将 在 必要 时 进行 哲 外 的 讨论 。 





1.2 ”实例 


本 书 会 在 每 处 关于 理论 的 讨论 之 后 安排 一 个 实例 ， 以 便 展示 具体 实现 。 这 通常 会 通过 代码 
清单 来 讲解 。 


1.3 代码 清 # 
代码 清单 有 助 于 巩固 对 基本 原理 的 理解 ， 如 代码 清单 1-1 所 示 。 
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代码 清单 1-1 代码 清单 示例 
054| // 由 Bird 类 来 创建 (实例 化 ) 一 只 “ 麻 翟 ” 


055| let sparrow = new Bird("sparrow", "gray"); 
056| Sparrow.fly(); 

057| Sparrow.WwaLk() ; 

058| sparrow. lay_egg(); 

059| sparrow.talk(); // 和 锁 误 ， 只 有 鹦 鸥 可 以 讲话 


代码 清单 1-1 中 的 示例 通过 Bi rd 类 实例 化 sparrow 对 象 ， 并 使 用 类 中 的 一 些 方法 。 





1.4 ”示意 图 


本 书 作 者 倾注 了 大 量 精力 来 绘制 示意 图 ， 以 介 绍 JavaScript 的 基本 思想 。 这 些 示 意图 对 理解 
很 有 帮助 。 一 些 难 以 掌握 的 抽象 概念 需要 可 视 化 的 解释 ， 借助 书 中 的 示意 图 能 够 更 快 地 掌握 这 
些 概 念 。 


本 书包 含 两 类 示意 图 : 抽象 概念 和 代码 卢 段 。 

















1.4.1 抽象 概念 


有 时 ， 如 琳 没 有 示意 图 ， 就 无 法 解释 菏 个 抽象 的 概念 或 其 结构 。 在 这 种 情况 下， 本 书 会 展 
不 一 张 示意 图 ， 如 图 1-1 所 示 。 





f Funct1on 





Class.constructor 
图 1-1 类 的 构造 咀 数 是 Function 类 型 的 对 象 晒 数 


图 1-2 是 JavaScript 函数 结构 的 示意 图 。 


1.5 主要 内 容 3 


名 称 Ca 国 局 默认 参数 





function Update [aaDCROEE YI ) 形 参 
1 —a;7 
b ;日 
Cc; 吕 
:有 uphi" 
arguments ; 实 参 的 类 数组 对 象 [LT PT 
C2 语 境 : 窗口 或 对 象 实例 
return 七 rUe ; 返回 值 
} 


图 1-2 JavaScript 的 函数 结构 


1.4.2 ”代码 片段 


在 本 书 中 ， 大 多 数 的 源 代码 采用 代码 清单 的 形式 展示 。 但 是 ， 当 需要 关注 一 个 特别 重要 的 
部 分 时 ， 本 书 将 展示 一 张 示 意图 ， 其 中 包含 源 代 码 ， 并 附加 颜色 高 完 显 示 。 例 如 ， 几 1-3 展示 
了 在 事件 回调 函数 的 请 境 中 使 用 的 茶 个 匿名 函数 。 














setTimeout(function() { 
console loe( Print Ssomethngoim I seconda" ): 
console.log(arguments); 

加 ， 1000 ) ; 





图 1-3 用 作 setTimeout 事件 回调 的 匿名 咀 数 


这 种 示意 图 会 省 略 源 代码 的 行 号 。 


1.5 ”主要 内 容 


本 书 不 会 花费 大 量 篇 幅 来 介绍 大 量 的 图 数 清单 或 每 个 对 象 的 可 用 方法 。 如 果 需 要 ， 你 可 以 
很 轻松 地 在 Mozilla 的 MDN Web 文档 、W3Schools 和 Stack Overflow 上 找到 这 些 信 息 ， 并 进行 
在 线 实践 。 
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本 书 的 许多 内 容 是 针对 现代 JavaScript 开发 编写 的 ， 主 要 针对 ES6 及 后 续 版 本 的 规 冰 和 矣 
数 式 编程 ， 包 括 使 用 高 阶 数 组 淆 数 、 和 骨头 函数 和 理解 执行 语 境 。 


1.6 ”注意 事项 


有 几 音 包含 “注意 事项 ”小 节 ， 这 些小 节 可 以 提供 有 见地 的 建议 。 





Chrome 控制 台 


许多 程序 员 仅 知道 Chrome 的 console.1l0g， 其 实 控 制 台 API 还 包含 一 些 其 他 实用 方法 ， 
这 些 方法 在 对 时 间 有 要 求 的 情况 下 特别 有 用 。 
2.1 copy 曙 效 
代码 清单 2-1 展示 了 如 何 将 已 有 对 象 的 JSON 表达 式 复 制 到 绥 冲 区 。 
代码 清单 2-1 copy 函数 示例 








> let x = { property: 1，prop1: 2, method: function(){} }; 


> copy(x); 
> | 


现在 ,该 JSON 表达 式 已 经 在 你 的 复制 粘贴 缓冲 区 中 了 ， 你 可 以 将 其 粘贴 到 任意 文本 编辑 
条 中 。 本 例 中 只 采用 了 x 这 个 简单 的 日 定义 对 象 。 请 想象 一 下 从 数据 库 API 返回 一 个 非 弟 复杂 
的 对 和 象 的 情形 。 








注意 : 如 果 仅 返回 JSON， 就 意味 着 方法 并 不 会 将 其 复制 到 缓冲 区 中 (JSON 字符 串 格 式 并 不 支 
持 方 法 ， 仅 支持 属性 )。 


2.2 console,.dir 





如 果 要 查看 所 有 对 象 的 属性 和 方法 ， 可 以 使 用 console.dir 方法， 直接 将 它们 打印 到 控制 
台 上 ， 如 代码 清单 2-2 所 示 。 


代码 清单 2-2 ”console.dir 方 法 示例 


> console.dir(x); 


vObject 
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pmethod: 7 () 
propl: 2 
property: 1 

> proto : Object 


> | 
神奇 的 是 ， 你 甚至 可 以 输出 DOM 元 素 ， 如 代码 清单 2-3 所 示 。 
代码 清单 2-3 ”输出 DOM 元 素 


> console.dir(document .body ) ; 


vbody 器 
aLink: 
accesskKey: 
assignedSlot: null 

pattributeSstyleMap: StylePropertyMap {size: 0} 
> attributes: NamedNodeMap {length: 6} 
autocapitalize: "" 
background: ™" 
baseURI: "http://localhost/experiments/jJavascript.html" 
bgColor: "" 


2.3 console.error 
console.error 的 用 法 如 代码 清单 2-4 所 示 。 


代码 清单 2-4 ”console.error 方 法 示例 


001| let fuel = 99; 
002| function Launch_rocket() { 


003 function warning_ msg() { 

004 console.error("Not enough fuel."); 
005 } 

006 if (fuel >= 100) { 

Ts A 

008 } else 

009 warning_msg();) 

010| } 

Ol 


012| Launch_rocket(); 


2.9 console.clear 7 


console.error 的 好 处 在 于 它 会 提供 栈 妃 踪 ， 如 代码 清单 2-5 所 示 。 
代码 清单 2-5 ” 栈 追 踪 
@ vNot enough fuel. 
warning msg Q@ javascript-x.html:9 
launch rocket @ Javascript-x.html:14 


(anonymous) Q@ javascript-x.html:17 





> | 
2.4 console.time 和 consoLe ,timeEnd 


你 可 以 跟 踩 函数 调用 所 消耗 的 时 间 ， 这 对 优化 代码 很 有 帮助 ， 如 代码 清单 2-6 所 示 。 
代码 清单 2-6 跟 踊 函数 调用 所 消耗 的 时 间 





Let arr = new Array(10000); 
For (Let oo < arr Lensth ad 
arr[i] = new Object() ; 







003 
004 
) 






控制 台 输 出 如 图 2-1 所 示 。 





default: 2.51768984375ms 
> | 
图 2-1 控制 台 输 出 示例 





2.5 Cconsole.clear 


console.clear 的 效果 如 图 2-2 所 示 。 


ConsolLe was cLeared 
《Undefined 
> | 
图 2-2 清空 控制 台 
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2.6 打印 对 象 


在 JavaScript 中 ,所 有 的 对 象 都 拥有 toSt ring 方法 。 当 将 一 个 对 象 传递 给 consoLe ,Log 时 ， 
它 可 以 将 其 作为 对 象 或 字符 串 进 行 打印 ， 如 代码 清单 2-7 所 示 。 


代码 清单 2-7 打印 对 象 


001| Let obj = {}; 

002 console.log(ob]j); // Dp] HT 

003| console.log("object = " + obj); // [object Objectj 
004| console.log( ${0bj} ) ; // [object Object] 








欢迎 使 用 JavaScript 





3.1 人 入口 点 


每 个 计算 机 程序 和 都 有 一 个 人 口 点 。 你 可 以 直接 在 <script> 标签 中 开始 编写 代码 。 这 意味 
着 该 脚本 在 被 下 载 到 浏览 带 中 时 ， 可 以 立即 执行 ， 而 无 须 关 注 DOM 或 其 他 媒介 。 








这 存在 一 个 问题 : 在 DOM 元 系 从 服务 希 上 下 载 完 成 之 前 ， 代 码 就 可 能 会 访问 它们 。 要 解 
决 该 问题 ， 可 以 等 到 DOM 树 完 全 可 用 时 再 进行 访问 。 





3.1.1 DOMContentLoaded 


为 了 等 待 DOM 事件 ,要 在 文档 对 象 中 添加 一 个 事件 监听 需 。 该 事件 的 名 称 是 DOMContent- 
Loaded， 如 代码 清单 3-1 所 示 。 


代码 清单 3-1 入 口 点 是 日 定义 聘 数 Lo0ad， 适合 在 这 里 初始 化 应 用 程序 对 和 象 


oT neEmEb 
002 <head> 


ee <title>DOM Loaded.</title> 

004 <script type = "text/jJavascript"> 

005 function load() { 

006 console.log("DOM Loaded."); 

Oo 

008 document.addEventListener("DOMContentLoaded", load); 
009 /Ser 


010 </head> 
oe <body></body> 
O12| /htmL> 


此 外 ， 也 可 以 将 Load 也 数 命 名 为 start、ready 或 initialize。 重 要 的 是 在 该 入 口 点 ， 
需要 保证 所 有 的 DOM 元 素 都 已 经 被 成 功 加 载 到 内 存 中 ， 而 且 在 使 用 JavaScript 来 访问 它们 时 不 
会 发 生 错误 。 
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3.1.2 ”注意 事项 


口 请 勿 只 在 <script> 标签 中 编写 代码 ， 而 不 使 用 入 口 点 函数 。 

ee etn 

口 请 根据 是 仅 需 要 等 待 DOM 还 是 和 其 他 媒介 , 来 决定 程序 人 口 点 是 DOMContentLoaded、 
readyStatei a me ag » 


























1. readyState 


为 了 安全 ， 在 绑 定 DOMContentLoaded 事件 之 前 ， 需 要 检查 readyState 属性 的 值 ， 如 代 
码 清单 3-2 所 示 。 


代码 清单 3-2 检查 document .readyState 


四 OUE<nEmiL> 

002 <head > 

0902 <title>DOM Really Loaded.</title> 

004 <script type = "text/jJavascript"> 

005 Puneteuon Loa 

I06 console.log("DOM Loaded."); 

oy } 

008 

009 if (document.readyState == "loading") { 
010 document.addEventListener("DOMContentLoaded", load); 
Oe } else { 

012 Load(); 

013 有 

014 {Seript» 


015 </head> 
016 <body></body> 
Dn 


2. DOM 与 媒介 


前 面 已 经 确定 了 一 个 安全 的 位 置 ， 用 来 初始 化 应 用 程序 。 但 是 ， 由 于 DOM 只 是 页 面 上 
所 有 HTML 元 系 的 一 个 树 形 结构 ， 因 此 它 通 洛 在 图 像 和 各 种 插件 等 媒介 加 载 之 前 就 可 以 使 
用 了 。 


尽管 <img src="http://urtl"> 是 DOM 元 素 ， 但 图 像 的 src 属性 中 指定 的 URL 内 容 可 
能 需要 更 多 的 时 间 来 加 载 。 


3. window.onload 








为 了 确认 所 有 的 非 DOM 媒介 内 容 已 经 下 载 完毕 ， 可 以 重 载 本 地 的 window.onload 事件 ， 


3.1 入 口 点 11 


如 代码 清单 3-3 所 示 。 我 们 可 以 使 用 window.onload 方法 ,一直 等 到 所 有 的 图 像 和 相关 媒介 都 
下 载 完成 。 


代码 清单 3-3 window.onload 








001| <html> 

002 <head> 

003 <title>Window Media Loaded.</titLe> 
004 <script type = "text/jJavascript"> 
005 window.onload = function() { 

006 /* DOM 与 媒介 〈 图 像 、 各 种 插件 ) */ 
io 

008 /SET 


009 </head> 
010 <body></body> 
开放 区 nn > 


3.1.3 “导入 外 部 脚本 
假设 my-script.js 文件 包含 如 代码 清单 3-4 所 示 的 定义 。 


代码 清单 3-4 my-script.js 文件 的 部 分 内 容 


001 let variable = 1; 
002| function myfunction() { return 2; } 


可 以 将 该 文件 添加 到 主 应 用 程序 文件 中 ， 如 代码 清单 3-5 所 示 。JavaScript 主 应 用 程序 文件 
可 以 是 index.html。 








代码 清单 3-5 ”导入 外 部 脚本 


LaneEmL> 

002 <head> 

003 <title>Include External Script</title> 
004 <script src = "my-script.]s"></script> 
005 <script type = "text/JjJavascript"> 

006 Let result = myfunction(); 

0) console.log(variable); pi i | 

008 console.log(result); // 2 

009 SD AL Gs 


010 </head> 
Ody <body></body> 
oi2| </html> 
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3.1.4 导入 与 导出 


从 ES6 开始 ， 人 们 使 用 关键 字 import 来 导入 变量 、 对 象 、 函 数 ， 而 使 用 关键 字 export 
来 导出 它们 。 假 设 有 一 个 名 为 mouse.js 的 文件 ， 该 文件 定义 了 Mouse 类 的 构造 函数 ， 如 代码 清 
单 3-6 所 示 。 
代码 清单 3-6 ”Mouse 类 的 构造 函数 


001 export function Mouse() { this.x = 0; this.y = 0; } 





为 了 让 变量 、 对 和 象 或 函数 可 以 被 导出 ,它们 的 定义 中 必须 修饰 export 关键 子 ,但 这 还 不 够 ! 
只 要 在 主 应 用 程序 文件 中 存在 一 个 对 应 的 import ，Mouse 的 构造 函数 束 会 被 导出 。 














并 不 是 模块 中 的 所 有 内 容 狠 可 以 导出 ， 其 中 一 些 项 仍 会 ( 且 应 该 ) 保持 私有 。 请 确保 你 要 
从 该 文件 吐出 的 所 有 内 容 部 修饰 了 export 关键 子 。 这 可 以 是 任意 名 称 的 定义 。 


1. script type = "module" 











为 了 导出 Mouse 类 并 在 应 用 程序 中 使 用 它 ， 必 须 确保 脚本 标签 的 type 属性 改 为 module， 
如 代码 清单 3-7 所 示 。 


代码 清单 3-7 现在 可 以 安全 地 访问 Mouse 类 ,将 该 类 的 一 个 新 对 象 实 例 化 ， 并 访问 其 属性 和 
四 
Bo n> 
002 <head> 


003 <title>Import Module</title> 

004 <script type = "module"> 

005 import { Mouse } from "./mouse.j7s"; 
006 Let mouse = new Mouse() ; 

007 “Sct1Dt> 


008 </head> 
009 <body></body> 
010| </html> 


起 
导 
复杂 的 程序 很 少 会 只 导 和 一 个 类 、 图 数 或 变量 。 代 码 清单 3-8 展示 了 如 何 从 两 个 文件 中 导 
入 多 项 。 


代码 清单 3-8 导入 多 项 


001| import { Mouse, Keyboard } from "./ nput.7S7" 
002| import { add, subtract, divide, multiply } from "./math.js"; 
0 


3.1 入 口 点 13 


004 
Q0S 
006 
oy 
008 
昌 人 了 
010 
gL1 
012 
gd3 
014 
Qs 
016 
QB 


// 初始 化 鼠标 对 象 ， 芒 问 鼠 标 位 置 
Let mouse = new Mouse() ; 
mouse .xs ££ 22256 
mouse.y; TS 


// 初始 化 键盘 对 象 ， 检查 是 否 按 下 Shift 
let keyboard = new Keyboard() ; 


keyboard.shiftIsPressed; // false 


// 使 用 数学 库 文 件 中 的 数学 函数 
add(2，5) ; i 
SUWDracLlo 5) /5 
divide(10, 5); 1 人 
mt tv 2 8 


从 input,js 文件 中 同时 导入 Mouse 类 和 Keyboard 类 
单独 的 对 象 ， 并 访问 其 属性 以 获取 数据 。 


从 math.js 文件 中 导入 数学 函数 add、 








(用 逗号 分 隔 )， 然 后 将 它们 实例 化 为 


subtract、divide、multiply。 该 数学 库 文件 的 源 


代码 如 下 所 示 。 在 定义 了 这 4 个 函数 之 后 ， 可 以 像 代 码 清单 3-9 这 样 导出 多 个 定义 。 
代码 清单 3-9 从 math.js 中 导出 多 个 定义 


v0 
QQ02 
加 四 二 
004 
005 
006 
OO 
008 


J 


// 数学 函数 集 

function add(a,b) { return a + b; 
function subtract(a,b) { return a 
function divide(a,b) { return a / 
function multiply(a,b) { return a 


/A 
export { add, subtract, divide, m 


动态 导入 


从 ECMAScript 10 开始 , 可 以 将 导 人 赋 给 一 个 变量 ， 
你 的 浏览 硕 或 许 还 不 文 持 此 操作 )。 
代码 清单 3-10 ”动态 导入 


001| element.addEventListener('click', async () => { 
const module = await import('./api-scripts/click.js'); 


002 
003 module.clickEvent(); 
00a4| 下 


} 
lh 
Dos 
wD 


ultiply } 


如 代码 清单 3-10 所 示 (在 写作 本 书 时 ， 
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3.2 严格 模式 
严格 模式 是 从 ECMAScript 5 开始 可 以 使 用 的 一 个 特性 。 有 了 它 ， 便 可 以 将 整个 程序 或 独立 
的 作用 域 放 到 一 个 “严格 ”的 操作 语 境 中 。 这 种 严格 语 境 会 防止 某 些 操 作 执 行 ， 并 抛 出 异常 。 
举例 来 说 ， 在 严格 模式 下 ， 不 可 以 使 用 未 声明 的 变量 ; 而 在 非 严 格 模式 下 ， 使 用 一 个 未 声 
明 的 变量 会 自动 创建 该 变量 。 
在 非 严 格 模式 下 ， 某 些 语句 即使 是 不 被 允许 的 ， 也 不 会 引发 错误 反馈 ， 这 就 导致 你 无 法 及 
时 注 间 到 错误 。 请 看 代码 清单 3-11。 
代码 清单 3-11 在 JavaScript 中 ,不 可 以 使 用 delete 关键 字 来 删除 变量 


001|var variable = 1; 
Oz 
003|delete variable; // false 























如 果 不 使 用 严格 模式 ,代码 清单 3-11 中 的 代码 会 悄 无 声息 地 失败 ,变量 将 不 会 被 删除 。 并 且 ， 
虽然 delete variable 会 返回 false，,， 但 程序 仍 会 继续 运行 。 


在 严格 模式 下 会 怎么 样 呢 ? 请 参考 代码 清单 3-12 和 图 3-1。 
代码 清单 3-12 ”该 示例 对 全 局 作用 域 开 局 严格 模式 


001| "use strictn"; 

002 

003|var variable = 1; 

O004 

005|delete variable; // SyntaxError 





@ Uncaught SyntaxError: Delete of an 
unqualified identifier in strict mode. 


> | 
图 3-1 在 严格 模式 下 ， 你 通常 会 发 现 更 多 错误 


3.2.1 ”对 一 个 作用 域 开 启 严 格 模式 


严格 模式 无 须 全 局 开启 。 可 以 对 单独 的 块 级 (或 函数 ) 作用 域 开 局 严格 模式 ， 如 代码 清 
单 3-13 所 示 。 





3.3 字面 量 15 


代码 清单 3-13 ”对 孔 数 作用 域 开 启 严 格 模 式 


001 // 对 函数 作用 域 开局 严格 模式 

002 function my_strict_function() { 

003 "USe Strict,. 

004 function inner() { console.log('Me too.'); } 
005 return "I am in strict mode. " + innert) 
006 上 





3.2.2 ”严格 模式 小 结 


在 专业 环境 下 ， 通 秆 会 开 司 严格 模式 ， 因 为 这 可 以 防止 产生 许多 洲 在 错误 ， 并 且 文 持 更 好 
的 软件 实践 。 但 在 初次 学 习 JavaScript 时 ， 你 也 许 应 该 关闭 严格 模式 ， 以 免 遇 到 由 高 级 内 容 导 致 








wl 


3.3 字面 
数字 字面 量 可 以 是 1、25、100 等 。 字 符 串 字面 量 可 以 是 "some text"。 


可 以 使 用 运算 和 从 (+、-、/、* 等 ) 来 组 合 字面 量 , 生成 单独 的 结 末 。 例 如 , 要 执行 5 + 2 操作 ， 
只 需 使 用 数字 字面 量 5 和 2 即 可 ， 如 代码 清单 3-14 所 示 。 
代码 清单 3-14 ”数字 字面 量 示 例 


// 将 两 个 数字 字面 量 相 加 
Ss 这 3 El 

















QoL 
002 








如 代码 清单 3-15 所 示 ， 可 以 将 两 个 字符 串 组 合成 一 个 句子 。 
代码 清单 3-15 ”字符 串 字面 量 示 例 


// 将 两 个 字符 囊 组 合成 一 个 身子 
"Hello™ + " there.",; "Hello there." 





O001 
USz 











将 两 个 不 同类 型 的 字面 量 相 加 ， 将 生成 一 个 强制 的 值 ， 如 代码 清单 3-16 所 示 。 
代码 清单 3-16 ”将 不 同类 型 的 字面 量 相 加 


yuyu 
Q02 





// Adding string to number to produce coerced value 
"USername" + 2574731; "USername2574731" 











在 JavaScript 中 ， 基 本 上 所 有 的 类 型 都 存在 字面 量 ， 如 代码 清单 3-17 所 示 。 
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[ 


代码 清单 3-17 字面 量 类 型 


(一 


I // 数字 字面 量 
“Some. text."; // 字符 串 字 面 量 
加 区 // 数组 字面 量 
二 下 // 对 象 字 面 量 
true ; // 布尔 型 字面 量 
function() {}; // 函数 是 一 个 值 


这 里 有 一 个 数组 字面 量 [] 和 一 个 对 和 象 字 面 量 {}。 
可 以 执行 { + [] ， 而 不 会 中 断 程 序 ， 但 该 结 采 军 无 意义 。 这 种 情形 通 篆 不 会 出 现 。 


请 注意 ，JavaScript 的 因数 可 以 作为 一 个 值 来 使 用 。 你 甚至 可 以 将 它们 作为 参数 传递 给 其 他 
旺 数 。 通 稼 并 不 将 它们 称 作 晒 数 字面 量 ， 而 是 称 作 困 数 表达 式 。 








如 表 3-1 所 示 ， 每 一 个 字面 量 人 部 有 对 应 的 构造 孙 数 。 


表 3-1 字面 量 与 构造 消 数 


值 类 型 (typeof) 构造 男 数 
1 "number" Number() 
3.14 "number" Number() 
some text. "string" String() 
[J "object" Array() 
>7{} "object" Object() 
true "boolean" Boolean() 
f f() {} "function" Function() 


typeof () 也 数 可 以 用 来 确定 字面 量 的 类 型 。 你 也 可 以 将 typeof 作为 不 之 括号 的 独立 关键 
字 使 用 ,例如 typeof x。 

举例 来 说 ，typeof 1 将 返回 字符 串 "number"，typeof {} 则 会 返回 学 符 串 "object"。 
但 是 ，"object" 并 不 表示 它 一 定 是 对 象 字面 量 , 例如 ，typeof new Number 也 会 返回 "object",， 
typeof new Array 也 是 如 此 。 








不 驻 的 是 ， 没 有 "array"( 你 会 得 到 "object" ), 但 有 一 种 典型 的 解决 办 法 。 为 了 检查 一 
个 值 是 否 为 数组 ,首先 检查 它 的 typeof 是 否 返 回 "object" ,然后 检查 它 是 否 存在 Length 属性 ， 
为 只 有 数组 才 有 该 属性 。 





Number(1) 与 new Number(1) 














可 以 使 用 字面 量 类 型 的 构造 浮 数 来 实例 化 一 个 值 。 不 过 ,使 用 字面 量 更 为 常见 ， 如 代码 清 
单 3-18 所 示 。 
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代码 清单 3-18 Number 与 new Number 

001 // 字面 量 
002 | 1 + 2;，; ce， 
003 // 使 用 Number 了 马 数 
004|1Numbpezr (1) + Number(2) : pS 
005 // 使 用 Number 对 象 的 构造 池 数 
006 new Number(1) + new Number (2); pi 
0071 超 / 组 合 
008|1 + Number(2) + new Number (4) ， 人 








稍 后 将 介绍 new。 
3.4 变量 


3.4.1 值 占 位 竺 
变量 是 不 同 值 的 占 位 符 。 变 量 声明 由 定义 和 赋值 组 成 ， 如 图 3-2 所 示 。 


Var 定义 赋值 
|et 
const var number = 


图 3-2 ”变量 声明 是 定义 + 赋值 


定义 变量 的 关键 字 有 var、Let 和 const, 但 它们 并 不 决定 变量 的 类 型 , 而 只 决定 使 用 方式 。 
稍 后 会 详细 讨论 这 些 规则 。 代 码 清单 3-19 是 一 些 示 例 。 


代码 清单 3-19 ”常见 的 赋值 





ooLlvaritlesacy = // 使 用 传统 的 Var 关键 字 
002| let number = 1; // 赋 数 值 

0 ee // 赋 字 符 串 

004| let array = [J]; // 赋 数 组 字面 量 
dee i // 赋 对 象 字 面 量 

006| Let json = {"a":1}; // 赋 JS0N1〈 对 象 ) 
Ooi on es a // 赋 JSON2 (字符 事 ) 
008| let boolean = true; // 贱 布 尔 值 

goo llee mi rm ny // 赋 Infinity (数值 ) 
010| let func = function(a) {return a};// 赋 函 数 

dylrt erow // 赋 前 头 函 数 

O013| Tet fp s a = a // 赋 前 头角 达 式 

ol35l leern = new Nunber( LY. // 赋 数 值 对 象 

014| let o = new Object(): // 赋 空 对 象 
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当 将 1 赋 给 一 个 变量 时 ， 该 变量 的 类 型 就 会 自动 变 为 number。 如 果 这 个 值 是 一 个 字符 串 ， 
那么 变量 的 类 型 就 是 string。 
3.4.2 动态 类 型 


JavaScript 是 一 门 动态 类 型 声言 。 这 意味 着 使 用 关键 字 var 或 Let 定义 的 变量 可 以 在 之 后 的 
JavaScript 程序 中 动态 地 重新 分 配 其 他 类 型 的 值 。 相 反 , 在 静态 类 型 语言 中 ,这 样 做 会 导致 错误 。 











3.4.3 ”定义 或 声明 

前 面 的 图 展示 了 JavaScript 的 变量 声明 。 

尽管 有 人 会 争辩 说 定义 就 是 声明 ， 但 是 这 种 逻辑 源 目 静态 类 型 语言 ， JavaScript 并 非 如 此 。 
在 静态 类 型 语言 中 ， 声 明确 定 变 量 的 类 型 ， 这 是 因为 编 详 天 需要 为 变量 类 型 分 配 内 存 〈 赋 值 号 
左 侧 )。 因 为 JavaScript 是 动态 类 型 语言 ， 所 以 变量 的 类 型 是 由 值 本 刁 的 类 型 来 确定 的 (赋值 号 
右 侧 )。 

因此 ， 这 会 让 人 感到 困惑 。 左 边 的 到 底 是 声明 、 定 义 还 是 两 者 羔 而 有 之 ? 这些 细 市 虽然 与 
静态 类 型 语言 紧密 相关 ， 但 在 JavaScript 及 其 他 动态 类 型 语言 中 没有 多 大 意义 。 























3.5 5 引用 传 凶 


在 计算 中 ， 管 将 数据 从 一 处 复制 到 男 一 处 。 由 些 ， 人 们 很 目 然 地 会 想到 当 将 值 从 一 个 变量 
赋 给 另 一 个 变量 时 ， 会 生成 一 个 副本 。 但 是 ，JavaScript 是 通过 引用 进行 赋值 的 ， 实 际 上 并 不 会 
生成 原始 变量 的 副本 ， 如 代码 清单 3-20 所 示 。 


代码 清单 3-20 引用 


001| let x= {Pp:11}; // 创建 新 变量 x 
002 let y = x; // y 有 是 X 的 引用 
os // 修改 Xx 的 原始 值 
004 console.log(y.p); a A. 





在 这 里 ,创建 变量 x， 并 将 对 象 字 面 量 {p: 1} 赋 给 它 。 
这 表示 从 现在 开始 ，x.p 的 值 将 等 于 1。 
创建 一 个 新 的 变量 y， 并 将 x 赋 给 它 。 

现在 ，y 释 为 x 的 引用 ， 而 不 是 副本 。 

从 现在 开始 ， 对 x 的 任何 修改 都 会 反映 到 yy 中 。 


3.6 ”作用 域 的 怪 疗 19 
这 就 是 将 x.p 的 值 改 为 2 时 ，y.p 也 会 改变 的 原因 。 
可 以 说 ， 现 在 y“ 指 向” 赋 给 x 的 原始 对 象 。 


从 该 段 代码 开始 到 其 结束 ， 计 算 机 的 内 存 中 只 有 一 份 {p: 1}。 多 重 赋 值 是 通过 引用 来 链接 
的 ， 如 代码 清单 3-21 所 示 。 


代码 清单 3-21 引用 链 








Ootee a // 创建 新 变量 a 
002| let bi ; // b 是 a 的 引用 
Ol el Ge le 


004| let d、=“c; 
pe 


005| let e、=、d; 
006| let Eee 


f 
007| let 9g 5 
008 
009 a.p = 5; // 修改 a 中 的 原始 值 
010 
011| console.1log(g.p); // 9.p 现 在 也 是 5 





3.6 ”作用 域 的 怪 闻 


在 作用 域 规则 方面 ，JavaScript 有 两 个 广为人知 的 怪 壮 ， 你 应 该 对 它们 有 所 了 解 ， 以 便 在 之 
后 调试 时 节省 时 间 。 





3.6.1 怪癖 1: 函数 内 的 Let 和 const 与 全 局 变量 


在 函数 体内 部 使 用 Let 或 const 定义 的 变量 不 可 以 与 同名 的 全 局 变量 共存 ， 如 代码 清单 3-22 
所 示 。 


代码 清单 3-22 ”如 果 在 柱 数 体内 部 使 用 Let 或 const 定义 局 部 变量 a, 那么 会 发 生 Reference- 
Error 错误 





001jLet a = "global a"; 
002 i let b = "global b"; 
003 


004 function x(){ 

005 console.log("x(): global b 
006 console.log("x(): global a 
007 tet 3 = 1 y/ 不 提升 

008 } 
009 
O10 |x( )3 


人 
1 + a); // ReferenceError 
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由 于 Let 关键 字 不 会 提升 定义 ， 且 有 一 个 全 局 变量 a， 因 此 从 逻辑 上 来 讲 ， 在 函数 x 的 内 部 ， 
在 使 用 Let a = 1 进行 定义 之 前 ， 变 量 a 应 该 来 自 全 局 作用 域 。 但 是 ， 事 实 并 非 如 此 。 

如 果 卫 数 内 部 已 经 存在 变量 a (并 且 是 使 用 Let 或 const 定义 的 )， 那么 在 咀 数 内 部 的 变量 a 
的 定义 之 前 使 用 a， 就 会 发 生 ReferenceError 错误 ， 即 使 存在 全 局 变量 a， 也 是 如 此 | 








3.6.2 ”怪癖 2: var 依附 于 window/this 对 象 ， 而 Let 和 const 不 会 
在 全 局 作用 域 中 ，this 引用 指向 window 对 象 或 全 局 语 境 的 实例 。 


当 使 用 var 关键 字 定 义 变量 时 ， 这 些 变 量 就 依附 于 window 对 象 ， 而 使 用 Let 和 const 定 
义 的 变量 不 会 这 样 ， 如 代码 清单 3-23 所 示 。 


代码 清单 3-23 var 和 Let 的 区 别 


001 console.log(this === window); // window 
002 
ole 
004 i let d = "d"; // 独立 于 this 

O005 
006 console.log(c); VE A 
ogreonsole Lop(tthnns ce). pe 
008 console.log(window.c); // "c" 
009 
010 ,console.log(d); pS ds 
oniileconsole ,loge(this.d)., J 
012 console.log(window.d); // 未 定义 











4.1 求 值 语句 


语句 是 计算 机 程序 的 最 小 组 成 部 分 。 本 章 将 介绍 一 些 常见 的 语句。 








使 用 关键 字 var 、Let 或 const 的 定义 会 返回 undefined (如 代码 清单 4-1 所 示 )， 这 是 因 
为 它们 只 进行 研 值 操作 ， 而 值 仅 存储 在 变量 中 。 





代码 清单 4-1 赋值 语句 本 身 会 生成 undefined， 而 该 值 会 存储 在 变量 a 中 


001 let a = 1; // undefined 








但 是 ， 如 果 之 后 将 赋值 的 变量 a 作为 单独 的 语句 使 用 ， 那 么 它 会 生成 数值 1， 如 代码 清单 4-2 
所 示 。 
代码 清单 4-2 ”产后 单个 值 而 非 undefined 的 语句 可 以 被 称 为 表达 式 

002 ai 了 

语句 通常 会 生成 一 个 值 ， 但 当 没 有 任何 值 可 以 返回 时 ,语句 的 求 值 结果 就 是 undefined， 


这 可 以 解释 为 “没有 值 "*， 如 图 4-1 所 示 。 空 语句 的 求 值 结果 是 undefined， 所 有 不 生成 值 的 语 
句 也 是 如 此 ， 如 变量 赋值 (006 ~ 010 ) 和 国 数 定 义 (017 )。 














语句 求 值 结果 
VOL| // undefined 
G02| 1 FE 
G03| "text"s Af ext" 
004 [ A 
O05 4 // undefined 
006| let a = 1; // undefined 
G07| Let Bb 十]; // undefined 
008| let C = {}; // undefined 
009| let d = new String("text"); // undefined 
010| let e = new Number (125); // undefined 
011| new String("text"); Lf text" 
012| new Number (125); jf 25 
y13| Let 1 SS funetiorn() { return 1 }3 // undefined 
人 | 科 区 FE 
015| Let o = (a, b) => a + b; // undefined 
和 和 下 | LT， 之】 7 3 
17| Tunction mame(} +} // undefined 


图 4-1 一 些 语句 的 求 值 结果 是 undefined 

尽管 一 些 求 值 规则 容易 理解 ， 但 是 特殊 的 规则 可 能 需要 死记 便 背 。 举 个 例子 ， 对 空 对 象 字 
面 量 求 值 会 得 到 什么 结果 ?在 JavaScript 中 , 求 值 结果 应 该 是 undefined。 然 而 ,对 空 数组 []( 与 
空 对 象 字面 量 紧密 相关 ) 的 求 值 结果 是 空 数组 [] ， 而 不 是 undefined。 
4.2 ”表达 式 

如 代码 清单 4-3 所 示 ， 表 达 式 1 + 1 生成 数值 2。 
代码 清单 4-3 ”表达 式 不 一 定 是 变量 定义 。 可 以 人 简单 地 将 字面 量 与 运算 符 进 行 组 合 ， 来 创建 表达 式 

003| 1 + 1; A 























在 JavaScript 中 还 存在 另外 一 种 特殊 的 表达 式 ， 如 代码 清单 4-4 所 示 。 


代码 清单 4-4 “函数 表达 式 


OT3 ltet T= Tunctiion() Peturn 1] 直 ， // undefined 
014| f(); Jj 1 


在 代码 清单 4-4 中 ， 据 数 f 的 求 值 结 来 是 1， 因 为 它 返 回 1。 这 就 是 此 类 函数 通常 被 称 为 隔 
数 表达 式 的 原因 。 





5.1 基本 类 型 


JavaScript 包含 7 种 基本 类 型 . boolean、null、undefined、number、bigint、string 
和 symboL。 基 本 类 型 会 帮助 我 们 处 理 如 字符 串 、 数 值 、 布 尔 值 等 简单 的 仁 。 来 看 看 这 些 基 本 类 
型 可 以 取 什 么 值 ， 如 图 5-1 所 示 。 











类 型 值 构造 函数 

muULL muULL 无 

undefined undefined be 
number 123 3014 Number () 
[yl bigint L230 Coen BigInt() 

string "Hello" String() 

boolean true false Boolean() 
I symbol 无 


图 5-1 JavaScript 的 基本 类 型 
一 些 基 本 类 型 有 对 应 的 构造 函数 。 代 人 码 清单 5-1 展示 了 赋 给 变量 名 的 一 些 基 本 类 型 。 


代码 清单 5-1 基本 类 型 的 赋值 


001| let a = undefined; // undefined 

002| let b = null; // null 

003| let c = 12; // 整数 

004| let d = 4.13; // 浮 点 数 

005| let e = 190n; // 大 整数 (超过 2 的 值 ) 
006| let ff = "Hello,."; // 文本 字符 串 

007 IE 二 >yNOCUDT // 创建 symbol 

008| console.log(typeof 有 下) ; // "symbol" 





数值 、 字 符 串 和 布尔 值 是 基本 的 值 单位 。 可 以 以 文字 形式 写 出 它们 : 数值 可 以 是 123 或 
3.14; 字符 串 可 以 是 "string" 或 模板 字符 串 ， 如 `I have {$number} apples. (请 注意 是 
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有 反 引 号， 这 使 你 能 够 灵活 地 将 变量 般 入 到 字符 串 中 ) ;布尔 值 只 能 是 true 或 faLse。 可 以 使 用 
运算 符 来 组 合 基 本 类 型 ， 将 基本 类 型 传递 给 子 数 ,或 作为 值 分 配给 对 和 象 属性 。 


Number()、BigInt()、String() 和 Boolean() 是 基本 的 构造 凶 数 。 本 书 将 适时 介绍 构造 
函数 和 类 。 接 下 来 更 详细 地 介绍 基本 关 型 。 


5.1.1 boolean 


boolean (布尔 类 型 ) 只 能 取 true 或 faLse， 如 图 5-2 和 图 5-3 所 示 。 


true false 


图 5-2” boolean 的 取 值 范围 


RS 构造 函数 
"boolean" string new Boolean(value) 


图 5-3”boolean 的 构造 函数 


5.1.2 null 


对 null 应 用 typeof 运算 符 的 结果 是 "object"， 如 图 5-4 所 示 。 


SS 构造 函数 
"object" string 无 


图 5-4 ”查看 null 的 类 型 


有 些 人 认为 这 是 JavaScript 的 一 个 错误 ， 因 为 null 没有 构造 函数 ， 并 不 是 对 象 。 他 们 可 能 
是 对 的 。 


5.1.3 undefined 





图 5-5 展示 了 对 undefined 应 用 typeof 运算 符 的 结果 。 


typeof 构造 函数 
"undefined" string 区 


图 5-5 ”查看 undefined 的 类 型 
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undefined 是 JavaScript 中 的 特殊 类 型 。 它 并 不 是 对 象 ， 只 是 在 你 命名 一 个 变量 而 未 对 其 
赋值 时 ，JavaScript 会 使 用 的 一 个 值 。 并 且 ， 提 升 变 量 也 会 被 自动 赋 上 undefined 值 。 
5.1.4 number 

图 5-6 展示 了 number (数值 类 型 ) 的 取 值 示 例 。 


sa Se NE [el dA OGG EEON motte Ke Tine LNaN 


图 5-6 ”number 的 取 值 示例 


number 可 以 取 负 值 、 正 值 或 小 数 (通常 称 为 浮 点 数 )， 甚 至 连 Infinity 值 也 有 正 负 之 分 。 
如 果 你 拥有 数学 背景 ， 就 能 更 好 地 理解 这 一 点 。 


从 技术 上 来 讲 ，NaN 是 语句 可 以 求 得 的 一 个 非 数字 值 。 它 可 以 直接 通过 Number .NaN 获取 。 
但 从 字面 上 看 , 正如 其 名 , 它 既 不 是 number 类 型 , 也 不 是 Number 对 象 。 例 如 , 它 可 以 是 字符 串 ， 
如 图 5-7 所 示 。 














typeof 构造 函数 
"number'”" string new Number (value) 


图 5-7 查看 number 的 类 型 
如 代码 清单 5-2 所 示 ， 对 数值 应 用 typeof 运算 和 从 的 结果 是 "number" (请 注意 ,返回 值 是 
字符 串 格 式 )。 
代码 清单 5-2 ”应 用 typeof 运算 符 


001| // typeof 运 算 符 返 回 字 符 串 格式 的 值 类 型 


002| typeof -1; "number™" 

003| typeof 5; "number" 

004| typeof 7; "Number™" 

005 

006| // 使 用 构造 肠 数 new Number() 来 创建 数字 

007| Let number = new Number(7) ; GE 
008| typeof number ; "object" 
009| typeof number .vaLueoOf() ; "number™" 


该 示例 展示 了 基本 类 型 的 字面 量 ( -1、5、7 等 ) 扎 Number 对 象 之 间 的 区 别 。 在 实例 化 之 后 ， 
值 就 不 再 是 字面 量 ， 而 是 该 类 型 的 一 个 对 和 象 。 


要 从 对 象 获 取 number 类 型 ， 请 对 value0f 方法 使 用 typeof， 如 以 上 示例 中 的 typeof 
number.value0f(); 所 示 。 





5.1.5 bigint 
bigint 是 ES10 新 增 的 基本 类 型 ， 直 到 2019 年 夏天 才 启 用 。 它 的 取 值 如 图 5-8 所 示 。 


但 
ln 32000n 9007199254740991n 9007199254740993 
图 5-8 bigint 的 取 值 示例 


过 去 ， 使 用 数字 字面 量 或 Numper() 构造 函数 创建 的 最 大 数值 存储 在 Number.MAX_SAFE 
INTEGER 中 ,为 9 007 199 254 740 991。 利 用 bigint 类 型 , 可 以 指定 比 Number.MAX_SAFE_ 
INTEGER 大 的 数值 ， 如 图 5-9 和 代码 清单 5-3 所 示 。 











typeof 构造 函数 
"bigint" string new BigInt (value) 


图 $-9 bigint 的 类 型 和 构造 冰 数 


代码 清单 5-3 bigint 类 型 


001| const limit = Number .MAX_SAFE_INTEGER ; 

002|// 9007199254740991 

003 

004| Limit + 1; 

005|// 9007199254740992 

006 

57hunma et 2 ， 

008|// 仍 为 9007199254740992 (MAX SAFE INTEGER + 1) 

009 

010| const small = ln; // 1n 

011| const Larger = 9007199254740991n; // 9007199254740991n 
012 

013| const integer = BigInt(9007199254740991) ; // 初始 化 为 数值 
014|// 9007199254740991n 

015 

016| const big = BigInt("9007199254740991"m); // 初始 化 为 字符 串 
017|// 9007199254740991n 

018 

OLoOlDie ee 

020|// 9007199254740993n ， 超 过 旧 的 数值 限制 


不 同 数 值 类 型 之 间 的 区 别 如 代码 清单 5-4 所 示 。 


代码 清单 5-4 ”不同 的 数值 类 型 


typeof 10; // 'Nnumber' 
typeof lOn; // 'bigint' 


日 日 
002 





两 种 类 型 之 间 可 以 使 用 相等 运算 符 ， 如 代码 清单 5-5 所 示 。 


代码 清单 5-5 ”使 用 相等 运算 符 


lOn === BigInNt(10); // true 
lon == 10; // true 








QoL 
002 





数学 运算 符 只 能 用 于 相同 的 类 型 ， 如 代码 清单 5-6 所 示 。 


代码 清单 5-6 ”使 用 数学 运算 符 
nEOnR Len /200 
002| 200n / 20; // 未 捕获 TypeError 
le // 不 可 以 将 bigint 与 其 他 类 型 混合 
004 // 请 使 用 显 式 转换 


最 前 面 的 一 正常 执行 ， 而 + 没有 ， 如 代码 清单 5-7 所 示 。 


代码 清单 5-7 -与 + 


OM LOO/ oo 
002| +100n // 未 捕获 TypeError 
003 // 不 可 以 将 bigint 值 转换 为 数字 





5.1.6 string 
图 5-10 是 string (字符 串 类 型 ) 的 取 值 示例 。 


值 


weexktwy Etext yd Peext CaterEelx nowWtbDesEe 


图 5-10” ”string 的 取 值 示例 


字符 串 值 是 使 用 任何 可 用 的 引号 字符 来 定义 的 ， 其 中 包括 双 引 号 、 单 引号 和 反 引 号 ( 与 波 
浪 号 位 于 同一 键 )。 此 外 ， 还 可 以 在 单 引 号 中 骸 套 双 3 引 号 ， 反 之 亦 然 。 图 5-11 展示 了 对 string 
应 用 typeof 运算 符 的 结果 。 




















typeof 构造 函数 
"string" string new String(value) 


图 5-11 查看 string 的 类 型 
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如 代码 清单 5-8 所 示 ， 对 字符 串 值 应 用 typeof 运算 符 的 结果 是 "string "。 


代码 清单 5-8 ”查看 string 的 类 型 


001| // typeof 运 算 符 返回 字符 串 格 式 的 值 类 型 


002| typeof "text"; oerina 
003| typeof "JavaScript Grammar"; Sverre 
004| typeof "username" + 25; "string" 





也 可 以 使 用 String() 构造 阴 数 来 创建 字符 串 类 型 的 对 象 ， 如 代码 清单 5-9 所 示 。 
代码 清单 5-9 使 用 String() 构造 函数 创建 字符 串 类 型 的 对 象 


001| // 使 用 string() 构 造 函 数 来 创建 该 类 型 的 对 象 | 
002| let string = new String("hi."); "object" 
Ootvoeor SErime: obiect, 
004| typeof string.valueOf(); Testrung" 








请 注意 ， 第 一 个 typeof 返回 的 是 "object"， 因 为 这 时 该 对 象 已 经 被 实例 化 (这 与 基本 类 
型 的 字面 量 不 同 , 字面 量 只 是 string 类 型 )。 为 了 获取 实例 化 对 象 的 值 , 要 使 用 value0f 方法 ， 
并 使 用 typeof string.value0f 来 确定 该 对 象 的 类 型 。 








52 模板 字 从 串 


使 用 反 引 号 定义 的 字符 串 具 有 特殊 的 功能 。 可 以 通过 这 种 方式 创建 模板 字符 串 ( 也 称 为 模 
板 字面 量 )， 以 便 在 字符 串 中 骸 入 动态 的 变量 值 ， 如 图 5-12 所 示 。 

















A 

let apples = 10; 
将 变量 上 诺 入 到 模板 字符 串 中 : 

There are ${apples} apples in the basket.. 
结 采 : 

There are 10 apples 1n the basket. 


图 $-12 ”模板 字符 串 示 例 














反 引 号 不 可 以 用 来 定义 对 象 字 面 量 的 属性 名 〈 必须 使 用 单 引号 或 双 引 号 )。 


JSON 格式 要 求 对 象 的 属性 名 必须 用 双 引 号 包 囊 ( 反 引 号 不 会 起 任何 作用 ， 也 不 会 引发 错误 )， 
如 代码 清单 5-10 所 示 。 
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代码 清单 5-10 JSON 格式 要 求 对 象 的 属性 名 必须 使 用 双 引 号 


OOD /A 

002| let object_literal = {a ”: 1}; // 非法 字符 错误 
003 

004|// 创建 一 个 格式 正确 的 JS0N 字 符 囊 

ol a ee ea 

O00 Let eon ’{ a : 1}’; // JSON 格 式 错 误 ( 

a a ee a UR A a 
008 | Let json4 ”{"a" : 1}”; // JSON 格 式 正确 (+ 双 引 号 ) 
009| let json5 am 1 ，7// JSON 格 冻 下 确 ( ”又 引号 ) 


后 文 将 详细 介绍 JSON。 


富有 创造 性 的 用 例 


模板 字符 串 可 以 用 来 解决 基于 动态 数值 、 以 恰当 的 语言 形式 生成 消息 的 问题 ， 其 中 一 个 典 
型 用 例 就 是 生成 警告 消息 ， 如 代码 清单 5-11 所 示 。 


代码 清单 5-11 模板 字符 串 的 用 例 




















001|for (let alerts = 0; alerts < 4; alerts++) { 

002 let one = (alerts == 1); // 一 个 警告 ? 

003 Eee = 

004 Let s = one == 1 ?3 1)"" : "sn"; // 后 面 加 S 或 空格 

005 

006  // 生成 正确 的 英文 消息 

oa let message = There S${is} S${alerts} alert${s}. ; 
008 console. log(message); 

009| } 





每 当 只 有 一 个 警告 时 ， 就 必须 删除 单词 alerts 最 后 的 s。 但 是 ,我们 不想 仅 为 一 种 情况 另外 
创建 一 个 字符 串 。 


有 鉴于 此 , 可 以 动态 计算 警告 个 数 , 并 据 此 确定 使 用 哪 一 个 动词 〈is 或 are ), 如 图 5-13 所 示 。 





There are 6 alerts|. 

There [is]1 alert. 

There are 2 alerts). 

There are 3 alerts). 
> | 


图 5-13 ”正确 使 用 单词 
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如 图 5-14 所 示 , 这 里 使 用 了 由 ?和 :组 成 的 三 元 运算 符 , 可 以 将 三 元 运算 符 看 作 内 联 if 语 人 句 。 
三 元 运算 符 并 不 需要 {} ， 因 为 它 并 不 文 持 多 条 语句 。 


上 else 
let result = 语句 ? 值 - 但 
图 $-14 ”三 元 运算 符 示 例 
其 中 ，? 可 以 解释 为 if-then 或 “如 果 前 面 语句 的 结果 为 真 ” ; : 可 以 解释 为 eLse。 


5.3 Symbol 


symbol (符号 类 型 ) 没有 构造 水 数 ， 如 图 5-15 所 示 。 


typeof 构造 函数 
"symbol™” ”string 无 


图 5-15 symbol 类 型 没有 构造 函数 

symbol 类 型 提供 了 一 种 定义 唯一 键 的 方法 。 

如 代码 清单 5-12 所 示 ， 由 于 symbol 类 型 没有 构造 函数 ， 因 此 无 法 使 用 new 来 初始 化 。 
代码 清单 5-12 不 能 用 new 初始 化 symbol 

Tt sym = new Symbol('sym'); // TypeError 

只 需 为 symbol 赋值 就 能 创建 一 个 具有 唯一 ID 的 新 symboL， 如 代码 清单 5-13 所 示 。 
代码 清单 5-13 ”创建 符号 

001| let sym = Symbol('sym'); // 创建 的 符号 


但 是 , 该 symbol 的 ID 并 不 是 用 户 定 义 的 字符 串 sym， 而 是 在 内 部 创建 的 。 以 下 示例 可 以 
说 明 这 一 点 。 


车 一 看 ， 我 们 可 能 会 对 代码 清单 5-14 中 的 语句 结果 是 false 感到 奇怪 。 
代码 清单 5-14 有 性 直 觉 的 结 
001| Symbol('sym') === Symbol('sym'); // false 








5.3 Symbol 31] 
每 当 调 用 Symbol('sym' ) 时 ， 就 会 创建 唯一 的 symboL。 由 于 比较 在 两 个 逻辑 不 同 的 ID 之 
间 进 行 ， 因 此 结果 是 false。 
symbol 可 以 用 来 定义 私有 对 和 象 的 属性 。 这 与 一 般 的 (公开 的 ) 对 和 象 属性 不 同 。 不 过 ,使 用 
symbol 创建 的 公开 属性 和 私有 属性 可 以 属于 同一 个 对 象 ， 如 代码 清单 5-15 所 示 。 
代码 清单 5-15 ”利用 symbol 定义 对 象 属性 


001| Let sym 
002| let bol 





Symbol('unique'); 
Ssymbol("distinct"); 

003| let one Symbol('only-one'); 

004| let ob] { property: "regular property", 
005 [syml :Ls 

006 [bol]: 2 }; 

007| obj[one] = 3; 


本 例 使 用 对 象 字 面 量 语法 创建 了 对 象 obj ， 并 将 它 的 属性 property 定义 为 string 类 型 ， 
第 2 个 属性 则 使 用 第 一 行 创建 的 [sym] 来 定义 。[sym] 的 值 为 1。 我们 以 同样 的 方式 添加 了 第 2 
个 symbol 属性 [bol] ， 并 将 其 赋值 为 2。 第 3 个 symbol 属性 [one] 则 通过 obj [one] 直接 水 
加 到 对 象 中 。 


打印 对 象 时 将 同时 显示 私有 属性 和 公开 属性 ， 如 代码 清单 5-16 所 示 。 
代码 清单 5-16 ”同时 显示 私有 属性 和 公开 属性 


001| console.log(ob]j); 

002| property: "regular property" 
G0 SvnmboL(aqnstinet yy 2 

004| Symbol(only-one): 3 

005| Symbol(unique): 1 





基于 symbol 的 私有 属性 对 0bject.entries、0bject.keys 及 其 他 办 代 器 (如 for...in 
循环 ) 是 不 可 见 的 ， 如 代码 清单 5-17 所 示 。 


代码 清单 5-17 基于 symbol 的 私有 属性 不 可 见 
004| for (let prop in ob] ) 


005 CONSOLe Lostprop Tr 2 OP IIRPIOopJy 
006| // property: reguLar property 
007 


008| console. log(Object.entries (ob]j)); 
009|// (2) ["property", "regular property"] 
010|// length: 1 


除 此 之 外 ，symbol 属性 对 JSON. stringify 方法 也 是 不 可 见 的 ， 如 代码 清单 5-18 所 未 。 
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代码 清单 5-18 ”symbol 属性 对 JSON. stringify 方法 不 可 见 


00JIEonmsoue Log(SON stringifyk4op]J) 
002| // {"property":"regular property' 
003 


为 什么 要 对 JSON 的 stringify 隐藏 基于 symbol 的 属性 呢 ? 


实际 上 这 是 很 明智 的 做 法 。 如 果 对 象 需要 拥有 仅 与 该 对 象 的 工作 方式 相关 、 与 它 所 表示 的 
数据 无 天 的 私有 属性 ， 那 该 怎么 办 ?9 这 些 私 有 属性 可 以 用 于 各 种 计数 硕 或 临时 存储 。 

私有 方法 或 私有 属性 的 深层 思想 是 保持 它们 对 外 部 不 可 见 。 它 们 仅 满足 内 部 实现 的 需求 。 
私有 实现 在 序列 化 对 象 时 并 不 重要 。 


然而 ，symbol 属性 可 以 通过 0bject.get0wnProperty9S9ymbols 方法 来 公开 ， 如 代码 清 
单 5-19 所 示 。 

















代码 清单 5-19 通过 0bject.get0OwnPropertySymbols 方法 公开 symbol 属性 


012| console.log(Object.getOwnPropertySymbols (ob])); 
013| // [Symbol (unique)l] 

014|// 0: Symbol (unique) 

Lol /SyvmooLl(anstinee 

016|// 2: Symbol(only-one) 

DT7 Lenmgtn :> 


尽管 如 此 ,不 应 该 使 用 0bject.get0wnPropertySymbots 方法 公开 私有 属性 。 它 的 唯一 用 
途 应 该 是 调试 。 


symbol 可 以 用 来 区 分 私有 属性 和 公开 属性 。 这 就 像 是 “将 山羊 与 绵羊 分 开 ”， 因 为 即使 
它们 提供 了 类 似 的 功能 ， 但 当 symbol 属性 被 用 于 迭代 需 或 console.1lo0g 因数 时 ， 属 性 也 会 


当 需 要 唯一 的 ID 时 ， 可 以 使 用 symboL。 因 此 ， 它 们 也 可 以 用 来 创建 ID 的 枚 举 列 表 中 的 常 
量 ， 如 代码 清单 5-20 所 示 。 


代码 清单 5-20” 枚 举 季节 


001| const seasons = { 











002 Winter: Symbol('Winter'); 
003 Sormme Svmbobl( prnnguw 
004 Summer: Symbol('Summer'); 
005 Autumn: Symbol('Autumn' ) ; 


006| } 
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全 局 symbol 注册 表 


正如 前 文 所 述 ，Symbol("string") === Symbol("string") 的 结果 是 fatse， 这 是 因为 
所 创建 的 两 个 symbol 是 不 同 的 。 不 过 ， 有 一 种 创建 字符 串 键 的 方法 可 以 履 盖 使 用 相同 的 名 字 
创建 的 symboL， 这 就 是 symbol 的 全 局 注册 表 。 它 可 以 使 用 Symbol.for 和 Symbol .keyFor 进 
行 访问 ， 如 代码 清单 5-21 所 示 。 


代码 清单 5-21 Symbol .for 


001| Let sym = Symbol.for('age'); 
002| Let bol = Symbol.for('age'); 
003 


004| obj [sym|] = 20; 

005| obj [bol] = 25; 

006 

007| console.log(obj [sym]); 
008| // 25 





对 象 私 有 的 symbol 属性 obj [sym] 输出 的 值 为 25 (该 值 原本 赋 给 obj[bol] )， 这 是 因为 
sym 和 bol 两 个 变量 在 定义 时 都 绑 定 到 了 全 局 symbol 注册 表 中 的 同一 个 键 age。 


换 句 话说， 这 两 个 定义 共享 同一 个 键 。 











5.4 构造 男 数 和 实例 

构造 水 数 不 同 于 实例 。 构 造 浮 数 是 目 定 义 对 象 类 型 的 定义 。 实 例 是 使 用 new 运算 符 通 过 构 
造 国 数 来 实例 化 的 对 象 。 

创建 一 个 上 自 定 义 的 构造 了 水 数 Pancake， 其 中 包含 一 个 对 象 属性 number 和 一 个 bake 方法 ， 
该 方法 在 被 调用 时 会 将 前 饼 的 个 数 加 1， 如 代码 清单 5-22 所 示 。 
代码 清单 5-22 目 定 义 构造 函数 Pancake 


001| // 创建 一 个 自 定义 的 构造 逊 数 
002| Let Pancake = function() { 





003 // 创建 对 象 属 性 

004 this.number = 0; 

005 // 创建 对 象 方法 

006 this.bake = function() { 

UV console.log("Baking the pancake..."); 
008 // 将 鹿 饼 的 个 数 加 1 

009 this.number++ ; 

010 43 

Gy 
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注意 ， 属 性 和 方法 部 是 通过 this 关键 学 附加 到 对 象 上 的 。 


构造 函数 只 是 对 和 象 类 型 的 设计 。 为 了 使 用 对 和 象 ,我们 必须 将 其 实例 化 ,如 代码 清单 5-23 所 示 。 
当 实 例 化 对 象 时 ， 就 会 在 计算 机 内 存 中 创建 该 对 象 的 一 个 实例 。 
代码 清单 5-23 ”实例 化 对 象 


001| // 实例 化 前 饼 机 
002| let pancake = new Pancake(); 





用 bake 方法 来 烘焙 3 个 鹿 饼 ， 这 会 使 毅 饼 计数 可 的 值 增 加 ， 如 代码 清单 5-24 所 示 。 
代码 清单 5-24 烘焙 3 个 煎饼 

001| // 烘焙 3 个 前 饼 

002| pancake.bake(); // "Baking the pancake..." 


003| pancake.bake(); // "Baking the pancake..." 
004| pancake.bake(); // "Baking the pancake..." 


现在 看 一 下 pancake.number 的 值 ， 如 代码 清单 5-25 所 示 。 
代码 清单 5-25 pancake.number 的 值 为 3 
0 pancake.number ); // 3 


你 可 以 查看 该 构造 函数 的 类 型 。 如 代码 清单 5-26 所 示 ， 构 造 函 数 Pancake 是 Function 类 
型 的 一 个 对 象 ， 所 有 的 自 定 义 对 象 都 是 如 此 。 这 是 因为 函数 本 身 就 是 构造 函数。 


代码 清单 5-26 ”查看 构造 两 数 Pancake 的 类 型 


0 ee /TUNnction FuncenomnG) Tt 





但 是 ， 如 果 通 过 实例 化 的 对 象 来 输出 构造 函数 ， 那 么 会 看 到 字符 串 格 式 的 整个 函数 体 ， 如 
代码 清单 5-27 所 示 。 


代码 清单 5-27 通过 实例 化 的 对 象 输出 构造 函数 


001| console. log(pancake.constructor); 


002 

003| Let Pancake = function() ff 

004 // 创建 对 象 属 性 

Or this.number = 0; 

006 // 创建 对 象 方法 

O07 this.bake = function() 地 

008 console. lLog("Baking the pancake..."); 
009 3 


010| 1 
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实际 上 ， 通 过 将 因数 体 以 字符 串 格 式 提 供给 Function 的 构造 函数 ， 可 以 创建 一 个 全 新 的 
胃 数 ， 如 代码 清单 5-28 所 示 。 


代码 清单 5-28 创建 全 新 的 函数 


ooll let body = “consore Log{ 'Hello from Tt() functton!') ， 
002 

003| Let f = new Function(body); 

004 


as fy) HeLttor From ft( /Iuncton! 


由 此 可 知 ，Function 是 创建 JavaScript 也 数 的 构造 消 数 。 





不 过 ， 在 创建 自己 的 Pancake 也 数 时 ，Pancake 成 了 目 定 义 对 象 的 构造 图 数 ， 你 也 可 以 使 
用 new 来 初始 化 该 对 象 。 
5.5 对 基本 类 型 执行 万 法 
5.5.1 使 用 括号 访问 对 象 属性 


括 写 运算 和 从 让 你 可 以 控制 完 对 哪 条 语句 求 值 ， 这 束 是 它 的 主要 用 途 。 例 如 ,二 名 5 * 10 + 
2 与 5 * (10 + 2) 是 不 一 样 的 。 

不 过 ， 插 号 有 时 也 会 用 来 访问 成 员 方 法 或 属性 。 你 可 以 下 接 对 基本 类 型 的 字面 量 执行 方法 。 
这 会 目 动 将 字面 量 转换 为 对 象 ， 以 便 执行 方法 。 在 某 些 情况 下 ， 如 针对 number 类 型 ， 必 须 先 
将 字面 量 用 括号 括 起 来 ， 否 则 程序 将 不 会 有 反应 ， 如 代码 清单 5-29 所 示 。 


代码 清单 5-29 使 用 括号 将 字面 量 转换 为 对 象 




















001| // 不 可 以 直接 对 字面 量 执行 Number 对 象 的 万 法 
002| stosEFinmery)， // 这 会 中 断 执 行 流程 
003 

004| // 但 通过 使 用 括号 ， 可 以 将 数字 字面 量 转换 为 对 象 

Qo ose VA Rs 

006 

007| // 对 学 符 事 执行 方法 无 须 括号 

008| "hello".toUpperCase(); We 

009 

010| // 但 如 果 使 用 括号 ， 也 可 以 正常 执行 

011 ("hello").toUpperCase(); A 2 Ry 

012 

013| // 直接 对 Number 对 和 象 执行 toString 方 法 

014 new Number(1).toString(); 天 











字面 量 只 是 字面 量 ， 通 过 访问 其 属性 ， 它 会 变 为 对 对 象 实例 的 引用 。 因 此 ， 可 以 对 字面 量 
执行 对 和 象 方法 。 
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5.5.2 ”连接 方法 
在 JavaScript 中 ， 孙 数 可 以 返回 this 关键 字 或 其 他 任意 的 什 ( 包 括 函 数 ) 因此 ， 可 以 使 
用 点 运算 符 来 连接 多 个 方法 ， 如 代码 清单 5-30 所 示 。 
代码 清单 5-30 ”使 用 点 运算 和 从 连接 多 个 方法 
"hello".toUpperCase().substr(1, 4); // "ELLO" 








叶 制 拓 型 转换 





如 末 从 零 开 始 学 习 JavaScript， 你 也 许 会 对 该 语言 的 一 些 语句 求 值 结果 感到 困惑 。 


举 一 个 例子 ， 如 果 随 意 地 将 不 同类 型 的 值 相 加 ， 并 用 + 运算 符 将 它们 连 在 一 起 ， 结 果 会 怎 
么 样 呢 ? 请 看 图 6-1。 





oilleonsone na + {} + true + [] + [5]); 


null[object Object |true5s 
> | 


图 6-1 将 不 同类 型 的 值 相 加 


结果 是 一 个 字符 串 。 这 也 许 让 人 感到 困惑 ， 毕 部 这 条 语句 中 没有 一 个 值 是 字符 串 ! 那 这 是 
怎么 回 事 呢 ? 


答案 : 当 + 运 算 符 遇 到 不 同类 型 的 对 象 时 ， 会 试 着 将 这 些 对 象 强制 转换 为 字符 串 格 式 的 值 。 
在 本 例 中 ， 我 们 将 得 到 一 条 新 的 语句 : “nuLL[object 0bject]" + true + [] + [5]。 


另外 ， 当 + 运算 符 的 一 边 是 字符 串 时 ， 它 会 试 着 将 另 一 边 强制 转换 为 字符 串 ， 并 执行 字符 
串 的 相 加 操作 。 


对 true 调用 toString 的 结果 是 "true"。 当 运算 和 从 的 男 一 边 是 字符 串 时 ， 对 空 数 组 [] 调 
用 toString 的 结果 是 "" (这 就 是 结果 中 看 起 来 缺少 它 的 原因 )。 最 后 ， 在 将 [5] 加 到 字符 串 
中 时 调用 [5] .toString， 结 果 是 "5"。 


6.1 ”强制 类 型 转换 示例 


代码 清单 6-1 是 强制 类 型 转换 的 一 些 典 型 示例 。 
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代码 清单 6-1 ”强制 类 型 转换 示例 
001| // 典 型 的 强制 类 型 转换 有 时 会 带 来 意 想不到 的 结果 


002| let a = true + 1; // 变 为 1 + 1， 即 2 
| 亲人 

004| let c = true + false; // 变 为 1 + 0， 即 1 
0 
006 Let e = "Username" + 1523462;  // 变 为 "Username1523462” 
| 让 本 二 本 二 SS 把 证 休 各 和 // NaN， 意 即 不 是 数字 
008| let g = NaN === NaN; // 变 为 faLse 
olesphe= a 0 ER a el 
01l0| let 1 = Infinity; // 仍 为 Infinity 

olll tet j = [] + []; // 变 为 "" <string> 
012| let k = Infinity; // 是 Infinity <number> 
O01 ny A IN ny 

014| let Wm = Infinity: // 仍 为 Infinity 

Oo ecenEEEHETRNTLY5 人 

0l6é6| let o = [] + {}; // 变 为 [object 0bject] 


如 果 将 无 意义 的 类 型 组 合 提供 给 JavaScript 运算 符 ， 那 么 JavaScript 将 尽 可 能 地 提供 最 佳 的 
可 用 值 。 


将 一 个 对 象 字面 量 {} 与 一 个 数组 [] 相 加 有 什么 意义 呢 ? 准确 地 说 ， 这 毫 无 意义 ， 但 通过 
对 [] 求 值 ， 我 们 至 少 可 以 在 发 生 这 种 情况 时 避免 破坏 代码 。 


虽然 这 种 安全 机 制 会 防止 程序 中 断 ,， 但 是 ， 实 际 上 这 种 情况 几乎 永远 不 会 出 现 。 我 们 可 以 
仅 将 上 述 情 况 中 的 大 多 数 作为 示例 来 对 每 ， 而 不 必 在 代码 中 真 的 这 样 做 。 
6.1.1 构造 函数 中 的 强制 类 型 转换 

在 将 一 个 初始 值 提供 给 类 型 构造 函数 时 ， 也 会 进行 强制 类 型 转换 ， 如 代码 清香 6-2 所 示 。 


代码 清单 6-2 ”构造 函数 中 的 强制 类 型 转换 











001| let A = Boolean(true); // true 

002| let B = Boolean([]); // true 

003| let C = Boolean({}); // true 

在 后 两 种 情况 中 ， 我 们 分 别 将 一 个 数组 字面 量 [] 和 一 个 对 象 字 面 量 {} 提供 给 Boolean 构 
造 函 数 。 这 是 什么 含义 呢 ?” 这 基本 上 没有 什么 含义 ,但 重点 是 在 这 种 怪异 的 情况 下 ， 至 少 求 值 


为 true。 


代码 清单 6-3 展示 了 一 种 安全 机 制 ， 可 以 防止 错误 发 生 。 
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代码 清单 6-3 ”基于 实 参 初始 化 布尔 值 
001| // 基于 实 参 来 初始 化 一 些 布尔 值 


002| let p = BooLean(faLse) ; // false 
003| Let q = Boolean (NaN); // false 
004| let r = Boolean (null); // false 
005| let s = Boolean(undefined); Ralse 
006| let 七 = Boolean(''); // false 
007| let u = Boolean(0); // false 
008| let v = Boolean(-0); /7 false 


对 没有 意义 的 值 求 值 ， 结 果 仍 然 为 true 或 false， 这 是 因为 布尔 类 型 只 取 这 两 个 值 。 

其 他 内 置 数据 类 型 的 构造 函数 与 此 相同 。JavaScript 会 尽 可 能 地 将 值 强制 转换 为 该 类 型 的 理 
想 值 。 
6.1.2 ”强制 类 型 转换 详解 

强制 类 型 转换 是 指 将 值 从 一 种 类 型 转换 为 另 一 种 类 型 。 例 如 ， 将 数值 转换 为 字符 捉 ， 将 对 
象 转换 为 字符 捉 ， 将 字符 串 转 换 为 数值 ( 前 提 是 字符 串 由 数字 字符 组 成 )， 等 等 。 

然而 对 于 初学 者 来 说 ， 当 值 与 不 同 的 运算 符 一 起 使 用 时 ， 并 不 是 所 有 的 情况 都 很 直观 。 

举例 来 说 ， 代 码 清 单 6-4 的 逻辑 可 能 难以 理解 。 
代码 清单 6-4 ”强制 类 型 转换 示例 

ee St 

因为 [] 的 两 个 实例 是 不 同 的 ， 所 以 值 为 false。JavaScript 的 == 运算 符 通过 引用 而 不 是 值 
来 判断 对 象 ， 如 代码 清单 6-5 所 示 。 
代码 清单 6-5 ”强制 类 型 转换 示例 


001 let a = [|]; 
002 a == a; // true 


以 上 语句 的 求 值 结果 为 true， 这 是 因为 变量 a 指向 的 实例 与 数组 字面 量 相 同 。 它 们 引用 的 
是 内 存 中 的 同一 个 位 置 。 

若是 代码 清单 6-6 这 种 情况 ， 结 果 会 怎么 样 呢 ? 尽管 你 在 实际 工作 中 不 会 编写 这 样 的 代码 ， 
但 也 需要 理解 这 样 的 强制 类 型 转换 。 
代码 清单 6-6 ”强制 类 型 转换 示例 

002| [] == ![]; // true 
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JavaScript 经 常会 将 不 同类 型 的 值 强 制 转 换 为 字符 串 或 数值 ， 布 尔 类 型 也 是 如 此 ， 如 代码 清 
单 6-7 所 示 。 


代码 清单 6-7 布尔 类 型 的 强制 类 型 转换 
oe | 


以 上 语句 与 1 + 0 是 一 样 的 。 
代码 清单 6-8 是 男 一 个 非 第 典型 的 例子 。 


代码 清单 6-8 ”NaN 的 强制 类 型 转换 
ona = Nan se 





虽然 这 些 示 例 一 开始 可 能 看 起 来 很 奇怪 ,但 随 着 你 对 类 型 和 运算 符 的 了 解 加 深 ， 它 们 会 变 
得 越 来 越 有 意义 。 

先 从 徐 单 的 内 容 开 始 。 一 元 加 减 运 算 符 会 将 值 强 制 转换 为 数字 。 如 果 该 值 不 是 数字 ， 那 么 
将 生成 NaN， 如 代码 清单 6-9 所 示 。 
代码 清单 6-9 生成 NaN 


00Ll const Ss = Text. 
002| console.log(-s); // NaN 





在 这 里 ， 一 元 减法 运算 从 (一 ) 无 法 将 字符 串 "text" 转换 为 数字 。 因 此 ， 这 会 返回 NaN， 
因为 “text" 并 不 是 数 字 。 


代码 清单 6-10 使 用 Number 构造 商 数 来 展示 相同 的 逻辑 。 
代码 清单 6-10 ”字符 串 的 强制 类 型 转换 


001| Number ("text"); // NaN ("text" 不 是 数值 字符 串 ) 
002| Number ("1"); // 1 ("1" 是 数值 字符 申 ) 








当 将 一 元 减法 运算 符 应 用 于 数字 时 ， 就 会 生成 预期 的 值 ， 如 代码 清单 6-11 所 示 。 
代码 清单 6-11 ”将 一 元 减法 运算 符 应 用 于 数字 


QIULERSTE SEE 三 二， 
002 | console.log(-a); // -1 
0.0e 
004 const b = 1; 
0slconsoles Log(tb yp /1 


该 规则 仪 适用 于 一 元 运算 符 。 
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数字 和 了 字符 串 的 算术 运算 

当然 ， 算 术 加 法 运算 符 (+ ) 需要 两 个 值 ， 如 代码 清单 6-12 所 示 。 
代码 清单 6-12 ”加 法 运算 

oi 

如 果 两 个 值 都 是 整数 ， 则 执行 算术 运算 。 如 果 其 中 一 个 是 字符 串 ， 则 会 进行 强制 类 型 转换 ， 
并 执行 字符 串 加 法 。 

如 果 提 供给 算术 加 法 运算 符 的 两 个 值 具有 不 同 的 类 型 ， 则 必须 解决 此 冲突 。JavaScript 会 通 
过 强制 类 型 转换 来 改变 其 中 的 一 个 值 ， 再 对 整 条 语句 进行 求 值 ， 以 得 到 更 有 意义 的 结果 。 

如 有 果 左 边 的 值 是 字符 串 ， 右 边 的 值 是 数字 ， 那 会 怎么 样 呢 ” 请 参考 代码 清单 6-13。 
代码 清单 6-13 ”字符 串 与 数字 相 加 

5 

这 里 的 + 会 被 看 作 字 符 串 加 法 运算 从 。 右 值 通过 String(1) 转换 为 "1"， 然 后 参与 求 值 ， 
结果 如 代码 清单 6-14 所 示 。 
代码 清单 6-14 ”字符 串 加 法 运算 

O01| "1" 区 le 1 J | 加 国 

JavaScript 实际 上 包含 3 种 加 法 运算 符 : 一 元 加 法 运算 从、 算术 加 法 运算 符 和 学 符 串 加 法 运 
算 符 。 

在 这 里 ，JavaScript 将 + 看 作 算术 加 法 运算 符 ， 而 不 是 一 元 加 法 运算 符 。 当 其 中 的 一 个 值 是 
字符 串 时 ，JavaScript 就 会 应 用 字符 串 加 法 运算 符 。 不 管 学 和 从 串 是 在 左边 还 是 在 右边 ， 都 没有 
关系 ， 博 句 的 求 值 结果 都 是 字符 串 ， 如 代码 清单 6-15 所 示 。 
代码 清单 6-15 ”数字 与 字符 串 相 加 

a eo hit a Ne 

运算 和 从 遵循 特定 的 结合 性 规则 。 与 其 他 大 多 数 运 算 符 一 样 ， 算 术 加 法 运算 和 从 从 左 到 右 求 值 ， 
如 图 6-2 所 示 。 






















































































从 左 到 碳 


国 : 国 ;一 一 国 


图 6-2 算术 加 法 运算 符 从 左 到 右 求 值 
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赋值 运算 符 则 从 右 到 左 求 值 ， 如 图 6-3 所 示 。 


Let NN = 加 ; Undefined 


从 布 到 左 
图 6-3 ”赋值 运算 符 从 右 到 左 求 值 





请 注音 ,在 以 上 示例 中 , 虽然 N 被 赋值 为 2, 但 语句 本 号 的 求 值 结果 为 undefined, 如 图 6-4 


所 示 。 
辆 : 区 二 


图 6-4 N 被 赋值 为 2 











6.2 ”多 个 值 相 加 
语句 通过 多 个 运算 符 结 合 在 一 起 的 情况 比较 常见 。 图 6-5 所 示 语 句 的 求 值 结果 应 该 是 什么 呢 ? 
国 : 国 : 国 : 国 : 国 一 > 于 
图 6-$ ”多 个 值 相 加 
首先 ， 所 有 纯 数值 会 进行 组 合 ， 如 图 6-6 所 示 。 
国 : 国 一 > 到 
图 6-6 中间 结 
但 这 不 足以 得 出 最 终结 果 。 其 次 ， 当 将 数值 与 字符 串 相 加 时 ， 数 值 将 被 强制 转换 为 字符 串 ， 


然后 执行 字符 串 加 法 ， 如 图 6-7 所 示 。 
E + 图 [| 
图 6-7 字符 串 加 法 
最 后 ， 我 们 得 到 了 字符 串 格式 的 "5"。 
当 数 值 与 字符 串 相 加 时 ， 数值 总 会 完 执 行 加 法 。 这 似乎 是 JavaScript 的 一 个 趋势 。 在 后 面 的 


示例 中 ， 我 们 将 使 用 相等 运算 符 来 比较 数值 和 字符 串 。JavaScript 选择 将 字符 串 转 换 为 数值 ， 而 
不 是 将 数值 转换 为 字符 串 。 
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有 些 运算 和 从 的 优先 级 高 于 其 他 的 运算 符 。 例 如 ， 乘 法 将 在 加 法 之 前 进行 运算 。 
我 们 来 看 一 下 如 图 6-8 所 示 的 语句 示例 。 

国 : 国 +: 国 :+ 国 : 国 

图 6-8 ”数值 与 字符 串 相 乘 

这 里 会 执行 几 个 操作 。 如 图 6-9 所 示 ， 字 人 符 串 "" 将 被 强制 转换 为 0，2 * 0 的 运算 结 采 


se 












为 0。 
国 : 国 : 国 : 国 :号 ? 
国 : 国 : 国 : 国 ¢。 国 ? 
加 < 四 = 图 : 轩 





国 + 国 
图 6-9 ”字符 串 "" 被 强制 转换 为 8 
在 执行 乘法 运算 之 后 ，1 + 1 + 1 将 执行 ， 结 琳 是 3。 


最 后 ，3 + 0 的 运算 结果 是 3。 


6.4 字符 串 与 数值 的 比较 


当 遇 到 相等 运算 符 == 时 ， 与 Number(string) 晒 数 转换 为 数值 (或 NaN ) 的 方式 一 样 ， 数 
值 字 符 串 会 转换 为 数值 。 


根据 ES 规范 ， 相 等 




















算 符 两 边 的 字符 串 和 数值 之 间 的 强制 类 型 转换 如 下 所 示 。 


mi 
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(1) 数值 字符 串 和 数值 的 比较 〈 见 图 6-10) 
I -= 


7? 














图 6-10 ”比较 数值 字符 串 和 数值 
(2) 非 数 值 字符 串 和 数值 的 比较 〈 见 图 6-11) 


I -= 0? 


-= EEE 


图 6-11 ”比较 非 数值 字符 串 和 数值 
如 果 字 符 串 不 包含 数值 ， 那 么 它 将 转换 为 NaN， 因 此 最 终 的 运算 结果 为 false。 
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(3) 其 他 的 比较 


其 他 不 同类 型 之 则 的 比较 (布尔 型 与 字符 串 、 布 尔 型 与 数值 等 ) 也 遵循 相似 的 规则 。 随 痢 
持续 编写 JavaScript 代码 ， 最 终 你 会 对 此 形成 一 种 直觉 。 


在 复杂 的 情况 下 ， 下 文中 的 运算 符 优 先 级 和 结合 性 一 览 表 会 为 你 提供 帮助 。 


6.5 运算 符 优 先 级 和 结合 性 一 览 表 


JavaScript 中 的 运算 符 优 先 级 大 致 分 为 20 个 等 级 。 括 号 () 可 以 改变 优先 级 的 默认 有 顺序。 如 
图 6-12 所 示 ， 红 色 值 在 结合 性 顺序 中 排 在 前 面 ， 例 如 ， 减 法 运算 符 是 红色 减 去 蓝 色 。 赋 信 运 算 
符 遵 循 从 右 到 左 的 顺序 。 

















运算 符 优先 级 表 不 

19 分 组 (@) 
18 成 员 访 问 @. 

需 计 算 的 成 员 访 问 @Ol®| 

new (〈 带 参数 列表 ) new ©(®,) 
17 函数 调用 ©@(@) 

new (无 参数 列表 ) new ©® 
16 后 置 递增 和 

后 置 递 减 @-- 
15 逻辑 非 !'©@ 

按 位 非 ~® 

一 元 加 法 +®@ 

一 元 减法 -® 

前 置 递增 ++®@ 

前 置 递减 -—® 

typeof typeof © 

void void ® 

delete delete® 
14 来 法 OO+*+® 

除法 ©@/e® 

取 模 Oe@ 


图 6-12 ”运算 符 优 先 级 和 结合 性 一 览 表 
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A， 
结合 


运算 符 。 
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加 法 

减法 
按 位 左 移 
按 位 右 移 
无 符号 右 移 
小 于 

小 于 等 于 
天 可 

大 于 等 于 
1n 
linstanceof 
相等 

不 等 

全 等 

不 全 等 
按 位 与 

按 位 异 或 
按 位 发 
逻辑 与 
逻辑 或 
条 件 运算 符 
赋值 


< 
~”: 
(D 
pd 
OO. 


总 


年 大 


个 


开 远 


巾 淋 
从 
六 
ee 


ols 


图 6-12 ( 续 ) 


性 齐 循 从 左 到 右 或 从 右 到 左 的 顺序 ， 它 决定 了 运算 顺序 ， 


OinNne® 
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6.6 ” 左 值 和 右 值 


在 许多 计算 机 语言 中 ， 运 算 符 左 侧 的 值 被 称 为 左 值 ， 右 侧 的 值 被 称 为 右 值 。 在 ES 规范 中 ， 
它们 通 第 被 称 为 x 值 和 y 值 。 


6.6.1 赋值 运算 符 


如 图 6-13 所 示 ， 赋值 运 算 符 接受 右 值 ， 并 将 其 传 给 左 值 。 左 值 通 第 是 一 个 变量 名 。 


图 6-13 ”赋值 运算 符 








6.6.2 ”算术 加 法 运算 符 


算术 加 法 运算 符 接受 左 值 ， 并 将 其 与 右 值 相 加 ， 如 图 6-14 所 示 。 
电 + 全 


图 6-14 ”算术 加 法 运算 符 
按照 这 种 逻辑 ， 可 以 使 用 图 6-12 中 的 优先 级 一 时 表 分 析 复 沫 语句 的 求 值 顺 序 。 








6.7 nuLL 与 undefined 


由 于 基本 类 型 null 并 不 是 对 和 象 ( 不 过 有 些 人 认为 它 是 )， 因 此 它 并 不 像 其 他 类 型 那样 拥有 
内 置 的 构造 函数 。 邓 运 的 是 ， 我 们 可 以 ( 并且 应 该 ) 使 用 它 的 字面 量 null。 


可 以 将 nuLL 看 作 显 式 地 将 “无 ” 值 或 “ 空 ” 值 赋 给 一 个 变量 的 唯一 类 型 。 这 样 就 不 会 得 到 
undefined 的 结 














如 果 未 将 变量 赋 为 nuLL， 那 么 它 的 值 将 默认 为 undefined， 如 代码 清单 6-16 所 示 。 
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代码 清单 6-16 ”定义 变量 而 不 赋值 
001| // 定义 一 个 变量 ， 而 不 赋值 (这 可 不 太 好 ) 
002| let bike:; 


003 
004| console.log(bike); // undefined 


也 可 以 显 式 地 将 变量 赋 为 undefined， 来 实现 相同 的 效果 ， 如 代码 清单 6-17 所 示 。 
代码 清单 6-17 “将 变量 赋 为 undefined 

001| // 显 式 地 将 变量 赋 为 undefined 

002| Let bike = undefined; 


003 
004| console.log(bike); // undefined 





但 是 ， 应 该 避免 这 种 情况 。 如 果 在 定义 变量 时 不 知道 它 的 值 ， 那 么 最 好 使 用 nuLL， 而 不 是 


undefined, 


在 赋 实 际 的 对 象 数据 之 前 ，nutL 会 为 变量 赋 一 个 临时 的 软 认 值 。 


初始 化 或 更 新 
在 实际 情况 下 ，nutl 值 可 以 玫 助 我 们 判断 是 需要 初始 化 数据 ， 还 是 只 需要 更 新 现 有 数据 。 
请 看 一 个 实际 的 示例 ， 如 代码 清单 6-18 所 示 。 

代码 清单 6-18 根据 nutl 值 判 断 是 对 数据 进行 初始 化 还 是 更 新 








001  // 显 式 地 将 null 赋 为 默认 变量 名 

002 let bike = null; 

003 

004 // 类 定义 

005 class Motorcycle { 

006 constructor(make, model, year) { 
007 this.make = make; 

008 this.model = model; 

009 this.year = Year ; 

010 this.features = null; 

Lm } 

012 getFeatures() { 

03 

014 // 工 . 首次 从 数据 库 下 载 特性 

515 if (this.features == nuLL) { 
016 this. features = BPN 
DL 





018 
Q19 
020 
2 
022 
O23 
024 
025 
026 
Qa 
028 
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// 2. 如 果 它 已 经 包含 数据 ， 则 更 新 特性 对 象 
} else { 
this.features = { /x* 从 数据 库 获 取 特 性 */ 上 


} 





上 


// 实例 化 新 的 bike 类 
bike = new MotorcycLe("Kawasaki"，"Z900RS CAFE", 2019); 


// 从 数据 库 获 取 特 性 
bike.getFeatures(); 








在 本 例 中 ， 我 们 将 nultl 赋 给 bike。 在 随后 的 代码 中 ， 该 变量 被 实例 化 为 一 个 真实 的 对 象 。 
在 程序 中 ，bike 一 直 都 不 是 undefined， 哪 怕 是 在 它 被 首次 初始 化 之 前 也 不 是 。 


在 对 象 内 部 ，this.features 属性 也 被 赋 为 nuLL。 之 后 ， 我 们 或 许可 以 从 数据 库 下 载 特 


性 列表 。 在 这 之 前 ， 可 以 确定 该 特性 对 象 末 被 填充 。 这 让 我 们 可 以 区 分 两 种 典型 的 情况 . 首次 
下 载 数 据 ( 如 果 this.features == null ) 和 更 新 现 有 数据 (之 前 已 经 下 载 了 数据 )。 





























作用 域 就 是 用 {} 括 起 来 的 区 域 。 请 注意 ， 不 要 将 作用 域 与 空 的 对 象 字 面 量 相 混淆 。 


作用 域 包 含 3 种 类 型 : 全 局 作用 域 、 块 级 作用 域 和 浮 数 作用 域 。 每 种 作用 域 对 变量 定义 的 
要 求 不 同 ， 且 规则 唯一 。 


事件 回调 函数 的 规则 与 函数 作用 域 相 同 ， 它 们 用 在 与 其 和 有 不 同 的 语 境 中 。 循 环 拥有 日 己 
的 块 级 作用 域 。 








7.1 变量 定义 


7.1.1 区 分 大 小 写 
如 代码 清单 7-1 所 示 ， 变 量 是 区 分 大 小 写 的 ， 这 意味 着 a 和 A 是 不 同 的 变量 。 
代码 清单 7-1 a 和 A 是 不 同 的 变量 


001| Let 


a = 3 
002| let A = "hello" 
De 
004| consoLe.Log(a) ; pi 
ooslleonoles any 人 
7.1.2 ”定义 





可 以 使 用 关键 字 var、tlet 和 const 来 定义 变量 。 


当然 , 如果 引 用 一 个 未 定义 的 变量 ， 就 会 发 生 ReferenceError 错误 , 即 “ 变 量 名 未 定义 ”， 
如 代码 清单 7-2 所 示 。 








代码 清单 7-2 ”引用 未 定义 的 变量 会 导致 ReferenceError 错误 


001| console.log( apple ); // ReferenceError: apple 未 定义 
002 

003| 

004 

OSI 


基于 该 代码 , 人 们 使 用 var 关键 字 和 变量 提升 来 探讨 变量 定义 。 在 Let 和 const 出 现 之 前 ， 
传统 的 模型 只 支持 var 定义 ， 如 代码 清单 7-3 所 示 。 


代码 清单 7-3 使 用 var 定义 变量 





001 var apple = 1; 

002 

Oo 

004 console.log( apple ); // 1 
005| } 


在 本 例 中 ，apple 里 然 定义 在 全 局 作用 域 中 ,但 也 可 以 被 内 部 的 块 级 作用 域 访问 。 在 全 局 
作用 域 中 定义 的 所 有 内 容 ( 其 至 是 函数 定义 ) 部 可 以 用 于 程序 的 任何 地 方 ， 其 值 面 曲 所 有 的 内 
部 作用 域 。 厂 在 全 局 作用 域 中 使 用 var 关键 字 定义 变量 ， 该 变量 也 会 日 动 变 为 window 对 和 象 的 
属性 ， 如 图 7-1 所 示 。 

















Var 〇 可 见 性 全 定义 
O 
块 级 作用 域 











图 7-1 在 全 局 作用 域 中 使 用 var 定义 变量 





7.2 ”变量 提升 


如 琳 在 块 级 作用 域 中 使 用 var 关键 字 来 定义 appte， 那 么 它 将 被 提升 到 全 局 作用 域 ! 提升 
就 是 “ 升 起 *”“ 放 到 上 面 ”的 意思 。 


变量 提升 仅 限于 使 用 var 关键 字 定 义 的 变量 和 使 用 function 关键 字 定 义 的 函数 。 使 用 
Let 和 const 定义 的 变量 并 不 会 被 提 升 ， 它 们 只 可 以 在 其 被 定义 的 作用 域 中 使 用 。 一 个 例外 是 ， 
使 用 var 关键 字 在 函数 作用 域 中 定义 的 变量 并 不 会 被 提升 。 通 常 ， 人 们 讲 的 变量 提升 是 针对 块 
级 作用 域 而 言 的 。 本 章 稍 后 会 更 详细 地 介绍 变量 提升 。 
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同样 ， 在 全 局 作用 域 中 定义 的 变量 基本 上 可 以 面向 全 局 语 境 中 定义 的 全 部 其 他 作用 域 ,， 包 
括 块 级 作用 域 、for-Loop 作用 域 、 晒 数 作用 域 ， 以 及 使 用 setTimeout、setInterval 或 者 
addEventListener 等 国 数 创建 的 事件 回调 函数 ， 如 图 7-2 所 示 。 








@Var O 可 见 性 @ 定义 
@ 全 局 作用 域 
O 
O 
块 级 作用 域 
O 


for-Loop 作 用 域 


O | 
孔 数 作用 域 

O 
SetTimeout 事 件 回调 函数 

O 


addEventListener 事 件 回 调 肠 数 





图 7-2 在 全 局 作用 域 中 定义 的 变量 基本 上 面向 全 部 其 他 作用 域 
如 图 7-3 所 示 ， 如 采 在 块 级 作用 域内 部 定义 一 个 变量 ， 那 么 会 怎么 样 呢 ? 


001| console.log( apple ); // undefined 
002 

oe | 

004 var apple = 1; 

onl 





O undefined | 
全 局 作用 域 


多 i 
O 块 级 作用 域 





图 7-3 ”在 块 级 作用 域内 部 定义 变量 
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虽然 变量 appte 被 提升 到 全 局 作用 域 ， 但 是 被 提升 变量 的 值 当 前 是 undefined， 并 不 是 1。 
由 此 可 见 ， 只 有 它 的 名 称 定义 锌 提升 了 。 


变量 提升 类 似 于 一 种 安全 特性 。 在 编写 代码 时 ， 不 应 该 依赖 该 机 制 。 虽 然 你 的 程序 不 会 发 
生 错 误 和 执行 中 新 ， 但 在 全 局 作用 域 中 不 会 持 有 被 提升 变量 的 值 。 值 得 庆 征 的 是 ，JavaScript 中 
的 变量 提升 是 自动 执行 的 。 在 编写 代码 的 大 部 分 时 间 里 ， 你 无 须 关 注 它 。 




















7.3 ”函数 提升 


胃 数 也 可 以 进行 提升 ， 虽 然 如 此 ， 但 变量 提升 通 筑 是 优先 执行 的 。 本 记 将 介绍 明 数 提升 的 
原理 。 可 以 在 代码 中 调用 一 个 函数 ， 只 要 随后 定义 这 个 函数 即 可 ， 如 代码 清单 7-4 所 示 。 


代码 清单 7-4 在 定义 函数 之 前 先 调用 
001| fun(); // Hello from fun() function. 
002 
OQ iuneEelomn Fu 
004 console.log("Hello from fun() function."); 
Os 


请 注意 ， 困 数 的 定义 可 位 于 调用 之 后 ， 这 在 JavaScript 中 是 合法 的 。 你 只 需 知道 这 是 因为 了 
数 提升 就 可 以 了 ， 如 图 7-4 所 示 。 














@ 全 局 作用 域 
fF() // 调用 


Ff} // 定义 


图 7-4 ”也 数 提升 


当然 ， 如 果 函 数 在 被 调用 之 前 已 经 进行 了 7 定义， 那么 虽然 提升 处 理 将 不 会 进行 ， 但 程序 仍 
会 正常 执行 。 当 函数 被 调用 时 ， 员 数 体内 部 的 语句 就 会 被 执行 。 无 名 蚂 数 可 以 被 指定 为 值 本 续 ， 
如 代码 清单 7-5 所 示 。 
代码 清单 7-5 ”少数 在 定义 后 进行 调用 

OOM oumnecTion Tum ET 

002 console.log("Hello from fun() function 1."); 

doe 

O004 

OOs |/ /A | 

006 |, var fun = function() +{ 

O07 console.log("Hello from fun() function 2."); 

008  } 
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可 以 将 匿名 哨 数 赋 给 变量 名 。 请 注意 ， 赋 给 变量 名 的 匿名 孙 数 并 不 会 像 非 匿名 函数 一 样 被 
提升 。 该 JavaScript 代码 是 合法 的 ， 并 不 会 发 生 函 数 重 定义 错误 。 该 阴 数 会 被 第 2 个 定义 重 写 。 

尽管 fun() 是 一 个 函数 ,但 当 我 们 创建 新 变量 fun， 并 将 另外 一 个 函数 赋 给 它 时 ， 我 们 对 
原始 函数 进行 了 重 命 名。 如 代码 清单 7-6 所 示 ， 如 果 调 用 fun() ， 会 怎么 样 呢 ? 


代码 清单 7-6 ”调用 因数 fun ( ) 
Tr 











哪 一 个 函数 体 将 会 被 执行 呢 ?” 请 见 代 码 清单 7-7。 
代码 清单 7-7 执行 结 
002| "Hello from fun() function 2." 


你 或 许 认为 代码 清单 7-8 将 引发 重 定义 错误 。 
代码 清单 7-8 ”这 仍 是 合法 代码 


OOMErumcenonmn Tumned 

002 console.log("Hello from fun() function 1."); 
03 

004 
ogsl ramnction TuncCy) 二 

006 console.log("Hello from fun() function 2."); 
Qo 


不 过 ， 这 仍 是 完全 合法 的 代码 ， 并 不 会 出 错 。 当 使 用 function 关键 字 定 义 两 个 图 数 ， 且 
它们 恰好 重 名 时 ， 后 定义 的 函数 是 有 效 的 ， 并 且 会 优先 执行 。 在 这 种 情况 下 ， 如 果 调 用 fun()， 
那么 控制 台 将 输出 第 2 条 消息 ， 如 代码 清单 7-9 所 示 。 
代码 清单 7-9 输出 第 2 条 消息 

002| "Hello From fun() function 2." 














这 就 可 以 理解 了 。 


如 代码 清单 7-10 所 示 ， 尺 管 变 量 名 的 定义 在 第 2 个 同名 的 函数 定义 之 前 ,但 它 将 优先 于 陶 
数 定义 。 





代码 清单 7-10” 先 定义 变量 


001| var fun = function() 1 

002 console.log("Hello from fun() function 1."); 
Goal 

004 





邮 


QUs 
006 
DO 
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EuncCEnon me 
console.log('"Hello from fun() function 2."); 


| 


现在 调用 fun() ， 执 行 结 末 如 代码 清单 7-11 所 示 。 


代码 清单 
5 加 


7-11 执行 结果 


"Hello from fun() function 1." 


你 可 以 从 代码 清单 7-11 中 看 出 JavaScript 提升 变量 和 水 数 的 顺序 。 函 数 首 先 锌 提升， 然后 


在 贡 数 作用 域 中 定义 变量 


如 代码 清单 7-12 所 示 ， 在 函数 作用 域 中 定义 的 变量 仅 限于 在 该 函数 范围 内 使 用 。 在 函数 外 
部 访问 它们 将 导致 引用 错误 。 


代码 清单 


0 
< 
全 
004 
005 





12 


umnecEom eum a 
var apple = 1; 


上 





console.log( apple ); // ReferenceError: apple 未 定义 


作用 域 的 访问 规则 如 图 7-5 所 示 。 


Var 
二 


~"? 


OS® 块 级 作用 域 1 


全 局 作用 域 





图 7-$ var 被 定义 在 全 局 作用 域 中 ,但 它 的 值 也 适用 于 块 级 作用 域 


实际 上 ， 当 块 级 作用 域 1 在 自己 的 范围 内 找 不 到 var 定义 时 ， 它 就 会 在 父 级 作用 域 中 查找 。 
如 果 块 级 作用 域 1 找到 该 变量 ， 那 么 它 就 会 继承 变量 的 值 。 在 函数 作用 域 中 定义 的 变量 基本 上 
只 接受 单 向 访问 ， 如 网 7-6 所 示 。 








@var 
| 会 局 作用 域 
*—@oO 函数 作用 域 


图 7-6 在 函数 作用 域 中 定义 的 变量 无 法 离开 函数 的 范围 ， 进 入 父 级 作用 域 
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卫 数 支持 财 包 模式 。 在 该 模式 下 ， 它 们 的 变量 对 全 局 作用 域 是 不 可 见 的 ， 但 可 以 被 它们 内 
部 的 其 他 函数 作用 域 访 问 ， 如 网 7-7 所 示 。 


@var 
| 会 局 作用 域 
*—@O—, 函数 作用 域 

\ | 函数 作用 域 


图 7-7 闭 包 模式 








图 7-7 体现 的 思想 是 保护 变量 不 受 全 局 作用 域 影响 ， 但 全 局 作用 域 仍 可 以 调用 该 函数 。 
7.4 变量 类 型 


JavaScript 是 一 门 动 态 类 型 语言 。 使 用 关键 字 var 或 者 Let 定义 的 变量 在 伞 浏览 侣 的 JavaScript 
引擎 编 详 之 后 ， 其 类 型 可 以 被 指定 ， 在 应 用 程序 的 运行 期 间 可 以 随时 改变 。 


关键 字 var、Let 和 const 不 决定 变量 的 类 型 ， 而 决定 变量 的 使 用 方式 ， 变量 是 否 可 以 在 
其 定义 的 作用 域 之 外 使 用 ; 变量 在 程序 运行 期 间 是 否 可 以 被 重新 赋值 。 具 体 来 说 ，var 和 Let 
都 可 以 ， 而 const 不 可 以 。 

















(1) var 


虽然 从 最 早 的 规范 开始 ，var 关键 字 就 一 直 存 在 ， 但 是 你 也 许 应 该 改 用 Let 和 const， 
为 尽管 在 大 多 数 情 况 下 ，var 关键 字 仍 然 可 以 使 用 ， 但 它 仅 文 持 遗 和 留 代 码 。 








(2) let 
Let 定义 的 变量 仅 限 于 在 其 定义 的 作用 域内 使 用 。 
(3) const 


const 与 Let 类 似 , 但 const 定义 的 变量 不 可 以 被 重新 赋值 。 


7.5 ”作用 域 可 见 性 的 区 别 
7.5.1 ”在 全 局 作用 域 中 
当 变 量 定义 在 全 局 作用 域 中 时 ，var、tlet 和 const 在 作用 域 可 见 性 方面 没有 区 别 。 它 们 
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对 内 部 的 块 级 作用 域 、 函 数 作用 域 和 事件 回调 防 数 作用 域 部 有 效 。 请 参考 图 7-8。 


@Var 国 [et ACONSsSt 


rs 全 局 作用 域 
OOA 块 级 作用 域 1 
O 口 A 块 级 作用 域 2 
O 口 A 块 级 作用 域 3 
ODA fun() 函数 作用 域 


O 口 A setTimeout() 回调 肠 数 作用 域 


O 口 A 可 见 性 人 国人 定义 
图 7-8 在 这 种 情况 下 ，var、Let 和 const 没有 区 别 


如 图 7-9 所 示 ， 关 键 子 Let 和 const 限制 变量 ,使 变量 仅 在 其 定义 的 作用 域内 有 效 。 








@Var 国 [et ACONSt 


全 局 作用 域 
〇 未 定义 块 级 作用 域 1 
O 〇 未 定义 块 级 作用 域 2 


块 级 作用 域 3 





O 口 A 可 见 性 加 国人 A 定义 
图 7-9 Let 和 const 使 变量 仅 在 其 定义 的 作用 域内 有 效 


使 用 Let 和 const 定义 的 变量 不 会 被 提升 ， 只 有 使 用 var 定义 的 变量 才 会 被 提升 。 











7.5.2 ”在 涵 数 作用 域 中 
在 函数 中 ,包括 var 在 内 的 所 有 变量 类 型 都 仅 适用 于 其 作用 域 ， 如 图 7-10 所 示 。 
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@Vvar 国 [et ACONSt 


全 局 作用 域 


块 级 作用 域 1 
块 级 作用 域 2 
块 级 作用 域 3 
函数 作用 域 





〇 口 入 可 见 性 因 国 A 信义 
图 7-10 ”函数 中 的 变量 类 型 仅 适 用 于 其 作用 域 


无 论 使 用 哪 一 个 关键 子 ， 虱 无 法 在 变量 定义 的 函数 作用 域外 部 访问 该 变量 。 














7.5.3” 闭 包 
函数 闭 包 就 是 一 个 函数 位 于 另 一 个 函数 内 部 ， 如 图 7-11 所 示 。 
@Var 
会 局 作用 域 
pe = 0 函数 作用 域 


闭 包 
Ocountert+; 水 数 作 用 域 


对 全 局 作用 域 不 可 见 ， 但 能 访问 外 部 函数 作用 域 中 的 变量 ! 





O 可见 性 @ 定义 
图 7-11 函数 闭 包 





调用 add() ， 可 以 使 counter 目 增 1， 使 用 其 他 的 作用 域 模式 则 无 法 实现 。 在 以 上 示例 中 ， 
add() 返回 一 个 匿名 肾 数 ， 该 限 数 使 在 外 部 函数 作用 域 中 定义 的 counter 变量 自 增 1。 请 尝试 
使 用 该 模式 来 创建 自己 的 闭 包 ， 如 代码 清单 7-13 所 示 。 
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代码 清单 7-13 ”创建 闭 包 


001|var plus = (function () { 
002 var counter = 0; // 只 定义 一 次 
003 Fetorn Tunctronvmey 


004 counter += 工 ; 
ws Precurn eouneer, 
006 } 

io OO 

008 


omel Due EAI 
010| plus(); // 2 
Ql se 


plus() 函数 由 一 个 执行 本 号 的 匿名 消 数 定义 。 
这 样 做 的 原因 


在 plus() 的 作用 域内 ， 另 一 个 匿名 函数 被 创建 ， 它 能 使 入 有 变量 counter 目 增 1， 并 将 
结果 作为 限 数 的 返回 值 回 传 给 全 局 作用 域 。 


分 析 : 全 局 作用 域 既 不 可 以 直接 访问 counter 变量 ， 也 不 可 以 修改 该 变量 。 只 有 闭 包 内 的 
代码 才 人 允许 其 内 部 男 数 来 修改 该 变量 ， 并 保持 该 变量 不 被 泄露 到 全 局 作用 域 。 


关键 在 于 全 局 作用 域 无 须知 让 或 了 解 pLus () 的 内 部 处 理 方式 。 它 只 专注 于 接收 pLus () 的 
结 东 ， 以 便 将 结 末 传 递 给 其 他 郴 数 。 


为 什么 要 花 时 间 来 解释 以 上 要 点 呢 ? 除了 闭 包 是 JavaScript 面试 中 的 常见 问题 之 一 ， 还 有 其 
他 原因 吗 ? 


财 包 类 似 于 封闭 ， 封 装 是 面 问 对 象 编程 的 主要 原则 之 一 ， 也 就 是 将 一 个 函数 或 者 方法 的 内 
部 处 理 隐 藏 起 来 ,使 得 调用 它 的 环境 看 不 到 其 细 市 。 变 量 私 有 化 是 理解 其 他 一 些 编程 概念 的 关键 。 
这 就 是 JavaScript 引入 Let 关键 字 的 具体 原因 。 这 为 在 块 级 作用 域 中 定义 的 变量 提供 了 自动 私 
有 化 。 变 量 私有 化 是 许多 编程 培 言 的 根本 特性 。 












































7.5.4 ”在 块 级 作用 域 中 


Let 和 const 隐藏 变量 的 可 见 性 ,使 其 仅 对 变量 定义 所 在 的 作用 域 反 其 内 部 作用 域 可 见 。 
当 你 开始 在 局 部 块 级 作用 域 或 者 函数 作用 域 中 定义 变量 时 ， 作 用 域 可 见 性 的 区 别 束 显 现 出 来 了 。 








7.5.5 在 类 中 
类 的 作用 域 只 是 一 个 占 位 符 。 如 果 直 接 在 类 的 作用 域 中 定义 变量 ， 就 会 发 生 错误 ， 如 代码 
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清单 7-14 所 示 。 


代码 清单 7-14 ”直接 在 类 的 作用 域 中 定义 变量 会 引发 错误 


voLleLases Cat 

002 Let property = 1; // Unexpected token 错 误 
003| this.property = 2; // Unexpected token 错 误 
004| 上 








代码 清单 7-15 展示 了 定义 局 部 变量 和 对 象 属 性 的 正确 位 置 。 请 注意 ,在 类 的 方法 中 ,Let( 或 
者 var 和 const ) 只 在 该 作用 域 中 创建 一 个 变量 。 因 此 ， 在 该 变量 定义 的 方法 外 部 无 法 访问 它 。 
代码 清单 7-15 “定义 局 部 变量 和 对 象 属性 的 正确 位 置 


901| class Cat 1 
DO constructor() { 











003 let property = 1; // 0K: 局 部 变量 

004 this.something = 2; // 0K: 对 象 属性 

O005 

006 method() { 

O07 console.log(this.property); // undefined 
008 console.log(this.something); // 1 

DS } 

010| } 











如 图 7-12 所 示 ， 在 类 中 ， 变 量 被 定义 在 类 的 构造 函数 或 者 方法 中 。 


全 局 作用 域 


构造 声 数 
函数 作用 域 


函数 作用 域 


函数 作用 域 








图 7-12 在 类 的 构造 疯 数 或 者 方法 中 定义 变量 


17.6 const 


const 不 同 于 Let 和 var。 它 需要 在 定义 时 进行 赋值 ， 如 代码 清单 7-16 所 示 。 
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代码 清单 7-16 ”const 需要 赋 初 始 值 


= 
002| console.log(a); // undefined 


003 
004| const b; // 钠 误 : const 声 明 中 缺少 初始 什 


这 是 因为 const 变量 的 值 不 可 以 修改 ， 如 代码 清单 7-17 所 示 。 
代码 清单 7-17 由 const 定义 的 变量 不 可 以 重新 赋值 


001| const speed_of_Light = 186000; // 英里 / 秒 ， 即 约 30 万 千 米 / 秒 
002| speed_of_light = 1; // 错误: 赋值 给 常量 





我 们 可 以 改变 数组 或 者 对 象 等 更 复杂 的 数据 结构 的 值 ， 即 使 这 些 变量 使 用 了 const 进行 定 
义 ， 也 是 如 此 。 


7.6.1 const 和 数组 





如 代码 清单 7-18 所 示 ，const 数组 的 值 是 可 以 修改 的 ， 只 是 不 可 以 再 将 新 的 对 象 赋 给 初始 
变量 名 。 


代码 清单 7-18 修改 const 数组 的 值 


001| const A = [|]; 
002| A[0] = "a"; // OK 


oe Es // 类 型 错误 : 赋值 给 常量 


7.6.2 const 和 对 象 字 面 量 


如 图 7-13 所 示 ， 对 象 字 面 量 与 数组 相似 ，const 则 只 定义 和 常量。 但 是 ， 这 并 不 表示 你 不 可 
以 改变 使 用 const 定义 的 变量 的 属性 值 。 














不 可 以 重新 赋值 











property: 工 ， 
method: func() { ... 上 







和 无 错误 
A.property 5/2; 本 可 以 重新 赋值 


图 7-13 const 变量 的 值 不 可 以 修改 ,但 其 属性 值 可 以 修改 
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7.6.3 ”const 小 结 


在 面 对 数 组 或 对 象 等 复杂 的 数据 结构 时 ， 你 可 以 认为 const 不 允许 重新 赋值 。 虽 然 变 量 < 
初始 对 象 锁定 ， 但 可 以 改变 它 的 属性 值 〈 在 数组 中 为 索引 值 )。 


如 采 变 量 的 值 由 const 定义 ， 且 为 单一 的 基本 类 型 (字符 串 、 数 值 或 布尔 值 )， 如 光速 、 
圆周 率 等 ， 那 么 该 值 就 不 可 修改 。 





7.7 注意 事项 


口 除非 想 提 升 变量 ， 否 则 请 勿 使 用 var。( 这 种 情况 非常 少见 ， 且 通常 出 现在 糟糕 的 软件 设 
计 中 。) 

口 请 尽量 使 用 Let 和 const 来 代替 var。 变 量 提升 (限于 使 用 var 定义 的 变量 ) 可 能 会 造成 
难以 预料 的 错误 。 这 是 因为 ， 如 果 只 有 变量 名 被 提升 了 ， 那 么 它 的 值 会 变 成 undefined。 

口 请 使 用 const 来 定义 如 光速 、 圆 周 率 、 税 率 等 在 应 用 程序 的 生命 周期 内 不 会 发 生 改 变 的 


二 
三 

















8.1 算术 运算 符 
图 8-1 展示 了 常见 的 算术 运算 符 。 





AS Ar 


运算 符 名 称 示 例 结 果 
二 加 法 了 2 
全 减法 De 3 2 
大 乘法 2 4 

除法 10 / 5; 2 

96 取 模 10 % 4; 2 
十 十 递增 t+ a + 1 
二 迎 减 2 = 本 


图 8-1 算术 运算 符 





算术 运算 符 是 最 基础 的 运算 符 。 它 们 的 运算 结果 不 会 出 人 意料 。 取 模 运 算 符 返 回 一 个 数 与 
另 一 个 数 相 匹配 的 次 数 。 如 在 图 8-1 的 例子 中 ，4 仅 匹配 10 两 次 。 该 运算 符 常 用 来 确定 余数 。 8 


无 须 给 变量 名 赋值 ， 就 可 以 编写 语句 ， 还 可 以 直接 在 浏览 器 的 开发 人 员 控 制 台 中 键 和 内容， 
进行 练习 ， 如 图 8-2 所 示 。 
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[x | Elements 
IJ ® | top 


No messages 
No user me... 
No errors 

No warnings  » 
No info 


No verbose 


> 


符 


Y | © 
汪汪 
2 
5S! = 
2 
交 本 六 
4 
10 £ S53 
2 
18 为 43 
2 


Console Sources 


Filter 


Network 


Performance Memory » : Xx 


Default levels ™ ©， 


图 8-2 下 接 在 Chrome 控制 台中 键入 JavaScript 语句 








Chrome 控制 台 可 以 正常 运算 ， 如 代码 清单 8-1 所 示 。 不 过 ， 在 源 代 人 码 中 对 人 简单 语句 求 值 是 
没有 意义 的 。 


代码 清单 8-1 运算 结果 


QoL 
002 
Us 
004 





十 


~ | 
OODNDPFc 


Be We Wwe We 


UP 





// 2 
// -1 
4 
ys 


蝎 第 见 的 做 法 是 下 接 对 变量 名 进行 操作 ， 如 代码 清单 8-2 所 示 。 
代码 清单 8-2 ”直接 操作 变量 名 


006 
QO 
908 
go03 
010 
ol 
UL2 
Ge 
014 
Qls 
016 
OL 
018 





// 定义 变量 
let variabl 


variable + 
variable -— 
variable / 
variable * 
variable * 


variablet++; 
variablett+t; 
variable++; 
variable--; 


- 


variable,; 


// undefined 


J 
// 
人 
// 
Ve 


POOW 
UN 


// 
gi 
J 
1 


人 W N 届 


8.4 


8.2 ”赋值 运算 符 
图 8-3 展示 了 常见 的 赋值 运算 符 。 





运算 符 名 称 示 例 
= 赋值 x = 1; 
FF 加 法 X += 2; 
-= 减法 x -= 1; 
大 二 来 法 xX *= 2; 
j= es x /= 2; 
%= 取 模 x %= 工 ; 


图 8-3 ”赋值 运算 符 
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ON 上 上 NOW 全 


赋值 运算 和 从 将 值 赋 给 变量 。 一 些 赋值 运算 符 可 以 组 合算 术 运 算 和 赋值 运算 。 





8.3” 字 从 串 运 算 稚 








可 以 将 字符 串 赋 给 变量 名 ， 或 使 用 前 文 提 到 的 用 作 算 术 加 法 的 + 运算 符 进 行 连接 。 当 + 运 
算 符 的 任意 一 侧 或 两 侧 的 值 是 子 符 串 时 ， 它 将 被 看 作 子 符 串 加 法 运算 从， 如 图 8-4 所 示 。 


























运算 符 名 称 示 例 
= 赋值 X = 'a! 
+= 连接 x += 'b' 
十 加 法 I1x' 十 Hy 











在 这 里 ，+= 运算 符 可 以 被 看 作 字 符 串 连 授 运算 和 从。 


8.4 ”比较 运算 符 


图 8-5 展示 了 第 见 的 比较 运算 和 从。 





结 果 
1 局， 
-ab 
xy 








图 8-5 ”比较 运算 符 
8.5 远 辑 运算 符 


图 8-6 展示 了 常见 的 逻辑 运算 符 。 











图 8-6 ”逻辑 运算 符 
逻辑 运算 符 用 来 确定 表达 式 或 变量 的 值 之 间 的 逻辑 。 


8.7 typeof 运算 符 67 


8.6 位 运算 符 





图 8-7 展示 了 律 见 的 位 运算 符 。 


运算 符 名 称 示 例 结 果 
按 位 与 a&b 1 
| 按 位 或 alb 13 
A 按 位 异 或 a^b 12 
a 按 位 非 ~ 日 = 
<< 按 位 左 移 a<<1 10 
> > 按 位 右 移 a>>2 2 


图 8-7 ”位 运算 符 
在 二 进 制 数 系统 中 ， 十 进 制 数 拥有 由 一 系列 0 和 1 表示 的 等 价 数 。 例 如 ,5 是 0101, 1 是 
0001。 位 运算 符 会 对 这 些 位 进行 处 理 ， 而 不 会 对 数字 的 十 进 制 值 进行 处 理 。 
本 书 不 会 详细 介绍 位 运算 符 的 工作 原理 ， 你 可 以 轻松 地 在 网 上 进行 查阅 。 它 们 具有 独特 的 
属性 ， 例 如 ，<< 运算 符 等 同 于 整数 乘 以 2，>> 运算 符 等 同 于 整数 除 以 2。 它 们 有 时 会 用 于 性 能 
优化 ， 因 为 它们 的 处 理 周 期 比 * 运算 符 和 / 运算 符 更 短 。 

















8.7 typeof 运算 和 他 


代码 清单 8-3 展示 了 typeof 运算 符 的 一 些 用 例 。 





代码 清单 8-3 ”typeof 运算 符 





oT numbem( /Re ) 
002| typeof Number (1); number (原始 值 ) 
003| typeof new Number(1); object (实例 ) 











typeof 运算 和 从 可 用 于 检查 值 的 类 型 。 该 运算 和 从 通常 对 基本 类 型 、 对 象 或 函数 进行 求 值 。 
typeof 运算 符 生 成 的 值 始终 为 字符 串 格式 ， 如 图 8-8 所 示 。typeof NaN 的 求 值 结果 为 'number'。 
这 只 是 JavaScript 的 诸多 怪 辛 之 一 。 不 过 ， 这 些 怪 阁 并 不 是 错误 ， 随 着 你 对 JavaScript 知识 的 
加 次 ， 它 们 会 变 得 更 有 意义 。 











运 算 符 颖 案 
typeof 125 ; Inumber'， 
typeof 100n ; 人 
typeof 'text'; | 
typeof NaN ; Inumber， 
typeof 七 rue ; IbooLean' 
typeof [] ; obieet 
typeof {}; !'object' 
typeof Object; 人 
typeof new Object() ; Iobject! 
typeof null; iobJject， 


图 8-8 typeof NaN 的 求 值 结果 为 number' 


NaN 依存 于 Number .NaN， 它 是 一 个 原始 值 。NaN 通常 是 在 数值 运算 中 产生 的 符号 。 例 如 ， 
试图 将 一 个 字符 串 传递 给 数字 对 象 的 构造 油 数 ， 以 实例 化 该 对 象 : new Number("str")， 就 会 
返回 NaN。 





8.8 ”三 元 运算 符 
三 元 运算 符 的 使 用 形式 为 语句 ?语句 : 语句 ;。 请 句 可 以 是 表达 式 或 单个 值 ， 如 图 8-9 
所 示 。 


if else 
let result = 9] ? 值 - 值 


图 8-9 ”三 元 运算 符 
三 元 运算 符 类 似 于 内 联 if 语句 。 它 并 不 支持 大 括号 {} 或 多 条 语句 。 
8.9 delete 
delete 关键 字 用 来 删除 对 象 属性 ， 如 代码 清单 8-4 所 示 。 


8.10 1m 09 


代码 清单 8-4 使 用 delete 关键 字 删 除 对 象 属性 


0901 
ze 
QO3 
004 
90s 
006 
Qu 
008 





Let bird = 1{ 
name: "raven", 
speed: "30mpg" 

}; 


console.log(bird); // {name 
delete bird.speed ; 
console.log(bird); // {name 


: "raven", speed: "30mpg"} 


: "raven"} 


虽然 不 可 以 使 用 delete 关键 字 来 删除 独立 的 变量 ,但 是 如 果 你 这 么 做 ,也 不 会 引发 错误 ( 除 
非 是 在 严格 模式 下 )。 


8.10 1n 
in 运算 符 可 以 用 来 检查 属性 名 是 否 存 在 于 对 和 象 中 ， 如 代码 清单 8-5 所 示 。 
代码 清单 8-5 ”in 运算 符 的 用 例 


Qn1 
002 


CT nn J‘ Tan 。 a np" 。 2 
1 in{f "a" :; 1, "b" : 2， 


ed 
WE 








in 运算 符 在 与 数组 一 起 使 用 时 ， 将 检查 索引 是 否 存 在 。 请 注意 ， 它 会 忽略 数组 或 对 象 中 的 
实际 值 ， 如 代码 清单 8-6 所 示 。 


代码 清单 8-6 检查 是 否 存 在 索引 值 


004 
OO 
006 
QO 
008 











We ] mn | 人 a 
© 1n ee ed el 
1 nn i do sd 
多 1n [a i 0 
3 nn Bi We ee 革 





// false 
// true 
// true 
// true 
// false 


可 以 使 用 in 运算 符 来 检查 内 置 数据 类 型 的 属性 。Length 属性 是 所 有 数组 固有 的 属性 ， 如 
代码 清单 8-7 所 示 。 


代码 清单 8-7 检查 Length 属性 


0J0 
i 


"Length" in []; 
Reneth Ee ma 


// true 
// true 





Length 属性 并 不 存在 于 对 象 中 ， 除 非 在 对 象 中 显 式 添 加 了 该 属性 ， 如 代码 清单 8-8 所 示 。 





AA 
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代码 清单 8-8 Length 属性 并 不 存在 于 对 象 中 


on eneenn nS 
014| "length" in {"length": 1}; 


in 运算 符 还 可 以 用 来 检查 对 象 的 构造 图 数 是 否 存在 属性 constructor 和 prototype， 如 


// false 
// true 





代码 清单 8-9 所 示 。 


代码 清单 8-9 ”检查 属性 constructor 和 prototype 
// 七 rue 


"constructor" 1n Object ; 
// true 


016 
“Drototype “in Object.; 


0 le 








, rest 和 ,,.Spread 


9.1 rest 属性 


. .rest 语法 可 以 帮助 你 从 子 数 的 单个 参数 名 中 提取 多 项 ， 并 引用 它们 。 单 个 rest 参数 
包含 传递 给 丽 数 的 一 个 或 多 个 参数 ， 如 图 9-1 所 示 。 


(... 哈 ) => .map(R=> console.log(R)); 


图 9-1 rest 属性 图 解 
如 果 传 递 给 函数 3 个 参数 ， 则 控制 台 输 出 如 图 9-2 所 示 。 





AAA ， 


图 9-2 ”控制 合 输出 
rest 参数 是 如 何 简化 代码 的 呢 ? 请 看 代码 清单 9-1。 
代码 清单 9-1 ... rest 语法 
oollLet f = (BS) => BE .map(item => console.log(item)); 
通过 将 控制 台 输 出 转移 给 单个 print 函数 ， 可 以 进一步 缩短 代码 ， 如 代码 清单 9-2 所 示 。 
代码 清单 9-2 将 控制 台 输 出 转移 给 print 函数 


001 Let print = item => console. log(item); 
002 


003| Let f = (WS) => WS.map (print); 
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使 用 任意 数量 的 参数 来 调用 f() 函数 ， 如 代码 清单 9-3 所 示 。 


代码 清单 9-3 ”调用 f() 函数 
| 和 








该 图 数 持 有 rest 参数 , 你 可 以 根据 需要 来 指定 任意 数量 的 参数 。 控 制 台 输 出 如 图 9-3 所 示 。 





Nn 人 WwW ND Pp 


> | 


图 9-3 ”控制 台 输出 








在 ES6 引 入 和 贡 头 函 数 之 后 ， 为 了 进一步 炭 短 代 码 ， 有 人 开始 使 用 单个 字符 来 命名 变量 ， 如 
代码 清单 9-4 所 示 。 


代码 清单 9-4 ”用 单个 字符 命名 变量 


De ee 





其 实 ， 这 样 做 只 是 利用 了 多 个 特性 一 一 箭头 函数 、. .rest 和 .map() 一 一 来 抽象 代码 ， 使 
其 看 起 来 像 一 个 数学 公式 ， 但 不 会 失去 原本 的 功能 。 这 看 起 来 比 for 循环 更 整洁 。 这 样 做 催化 
本 代码 ， 但 会 增加 代码 的 理解 难度 。 请 记 住 ， 如 来 你 在 一 个 团队 中 工作 ， 那 么 其 他 人 可 能 正在 
读 你 的 代码 ， 你 将 来 也 会 读 别 人 的 代码 。 











9.2 spread 属性 
spread 与 rest 相反 ， 它 可 以 帮助 你 从 对 和 象 中 提取 组 成 部 分 ， 如 图 9-4 所 示 。 


et { ®, 典 上 里 }= 加 : 
let{ 少 , 温 }= 月 : 


图 9-4 spread 属性 图 解 
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9.3 ,.,rest 和 .,,SsSpread 








许多 人 称呼 ,. .rest 和 ., .spread 为 语法 运算 符 。 但 是 ,它们 实际 上 只 是 请 法 。 这 是 因为 ， 
运算 符 通 弟 会 修改 值 ，.. .rest 和 .. .spread 则 会 赋值 。 如 宁 非 要 将 它们 划 到 运算 符 的 类 别 中 ， 
那么 它们 类 似 于 赋值 运算 符 =。.. .rest 和 .. ,spread 只 是 对 赋值 运算 符 进行 抽象 ， 以 处 理 多 


个 参数 。 








在 困 数 定义 中 ，.… .rest 语法 作为 参数 名 使 用 时 ， 被 称 为 rest 人 参数， 其 含义 为 “其 余 的 
参数 ”"。 有 时 ， 它 也 被 称 为 rest 元 素 ， 因 为 它 表 示 多 个 值 。 


.. ,rest 语法 和 ... spread 语法 都 采用 ,, .name 的 形式 。 那 么 ， 它 们 有 什么 区 别 呢 ? 
口 .. .rest: 将 所 有 剩余 的 参数 (“其 余 的 参数 ”) 收集 到 一 个 数组 中 。 
口 .. .Spread: 将 迭代 兹 展开 为 一 个 或 多 个 参数 。 
9.3.1 语法 详解 
假设 有 一 个 简单 的 函数 sum() ， 如 代码 清单 9-5 所 示 。 
代码 清单 9-5 ”也 数 sum() 
001| function sum(a, b) { return a + b; } 
这 种 形式 限制 该 函数 仅 接 受 两 个 参数 。 


rest 参数 可 以 为 函数 收集 任意 数量 的 参数 ， 并 将 它们 存储 到 一 个 数组 中 ( 本 例 中 为 
args )， 如 代码 清单 9-6 所 示 。 


代码 清单 9-6 ”rest 参数 
001|function sum( 全 全国 ) { 


002 console. Log (BFPgS); 
0， 
0 二 SOIL 2 SN 7 1 23 











这 类 似 于 内 骸 参 数 数组 的 对 象 ， 但 它们 之 间 存 在 区 别 。 顾 名 思 义 ，rest 可 以 获取 “其 余 ” 
的 参数 。 


请 记 住 ，rest 必须 是 唯一 的 参数 标记 或 是 参数 列表 中 的 最 后 一 个 。 它 不 可 以 是 多 个 参数 中 
的 第 一 个 ， 如 代码 清单 9-7 所 示 。 
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代码 清单 9-7 rest 参数 不 可 以 作为 第 一 个 参数 ， 它 后 面 不 能 跟随 其 他 参数 
ae eel Sum re De 
rest 参数 也 不 可 以 出 现在 参数 列表 的 中 间 ， 如 代码 清单 9-8 所 示 。 
代码 清单 9-8 同样 ，rest 参数 不 可 以 出 现在 参数 列表 的 中 间 


oo Suma res ce Th 





如 采 不 巡 循 上 述 规则 ， 那 么 控制 台 将 出 现 如 图 9-5 所 示 的 错误 。 
@ Uncaught SyntaxError: Rest parameter must be last formal parameter 
> | 
图 9-5 控制 台 提 示 rest 参数 位 置 错误 
代码 清单 9-9 展示 了 rest 参数 的 正确 位 置 。 
代码 清单 9-9 ”rest 参数 的 正确 位 置 
To | en en oT sum(a mbD. argSs) 1 // 正确 
请 看 代码 清单 9-10。 


代码 清单 9-10 ”扁平 化 数组 


Qo 个 记 
002 sum([1,2,3]); // Array(3) 
003 
004 // 可 以 使 用 .. ,spread 语法 来 扁平 化 数组 
Oo | 





在 这 种 情况 下 ，...[1,2,3] 中 的 3 个 点 实际 上 就 是 .. .spread。 从 这 个 示例 可 以 看 出 ， 
.. ,Spread 与 ,. .rest 相反 ， 它 从 一 个 数组 中 取出 值 。 我 们 稍 后 将 看 到 从 对 象 中 取 值 的 示例 。 
如 代码 清单 9-11 所 示 ， 与 .. .rest 相反 ，.. .spread 可 以 在 列表 的 任何 位 置 使 用 。 不 过 ， 
二 者 有 时 会 重 巷 。 
代码 清单 9-11 .. .rest 与 ...spread 重 等 


ol/ XH ange rn rest 
002 .function print(a, 全国) I 
003 console.log(a); 
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004 console. Log (EPBS); 
Gos 
006 print (本 是 昌 ，4，5) ; // 在 这 里 是 |.. .spread 
DOTN A 

008 // args = [2, 3, 4,，5] 











在 这 里 ，.. .spread 组 成 了 完整 的 参数 列表 (1，2，3，4，5)， 并 传递 给 print 郴 数 。 
在 print 卫 数 内 部 ，a 等 于 1, 而 [2，3，4，5] 是 “其 余 ” 的 参数 。 


代码 清单 9-12 是 为 外 一 个 示例 。 
代码 清单 9-12 ”又 一 个 示例 


001 // 将 含有 3 个 元 素 的 数组 展开 到 前 3 个 参数 中 
002 | function print2(a, b, c, ...args) { 
003 console. Log(a), 

004 console.log(b); 

OVDS console. Log(c), 

006 console.log(args); 

ger 


代码 清单 9-13 展示 了 执行 结 


代码 清单 9-13 ”执行 结果 


0 0 a np | es ee 
002|//a= 1 

003|// b= 2 

004|// c= 3 

005 // args = [4, 5] 











9.3.2 ”编写 市 rest 参数 的 sum( ) 函数 
通过 使 用 rest 参数 ， 我 们 的 第 一 个 sum( ) 函数 看 起 来 如 代码 清单 9-14 所 示 。 


代码 清单 9-14 带 rest 参数 的 sum() 郴 数 


oom fonction sum( "argumemnts}) 1 
002 Let sum = 0; 
003 for (let arg of arguments) 





004 sum += arg,; 
O00s return sum; 
006 } 





OO sm 2 /3 


A 
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如 代码 清单 9-15 所 示 ， 由 于 .. .args 会 生成 一 个 数组 ， 使 其 成 为 兴 代 如， 因此 可 以 使 用 
reducer 来 执行 求 和 运算 。 


代码 清单 9-15 求 和 


OoTlTtunction sum(C args) 1 

002 return args.reduce((x, Vv) => x + v, 0); 
003|} 
004 1sum(1, 2, 3, 4, 5); // 15 





rest 参数 也 可 以 用 于 第 头 函 数 ， 因 此 可 以 进一步 缩短 了 咀 数 代 码 ， 如 代码 清单 9-16 所 示 。 
代码 清单 9-16 将 rest 参数 用 于 和 头 函 数 


001|Let sum = (...a) => a.reduce((x, Vv) => x + v, 0);， 
002 | sum(100, 200, 400); // 700 


有 些 人 认为 ,虽然 这 种 格式 较 短 ,但 很 难 阅 读 。 这 就 是 你 在 采用 函数 式 编程 风格 时 知 要 权 
衡 的 。 拥 有 数学 育 景 的 人 会 认为 这 很 价 济 ， 但 传统 的 程序 员 或 许 并 不 这 么 认为 。 


9.3.3 使 用 spread 来 扁平 化 数组 


请 见 代码 清单 9-17。 对 于 一 只 长 着 月 光 般 银色 皮毛 的 母 猜 来 说 ， 卢 娜 (Luna ) 是 一 个 很 好 
的 名 字 。 


代码 清单 9-17 数组 局 平 化 示例 


001|Let names = ["felix", "luna"]; 
002|const cats = [...names, "daisy"|]; 
| 








9.3.4 在 数组 、 对 象 或 函数 参数 之 外 使 用 spread 
不 可 以 使 用 spread 给 变量 赋值 ， 如 代码 清单 9-18 和 图 9-6 所 示 。 


代码 清单 9-18 如果 使 用 sp read 给 变量 赋值 ， 会 发 生 错误 
Te = ee A 





@ Uncaught SyntaxError: Unexpected token ... 
> | 


图 9-6 提示 出 错 
你 失望 了 吗 ? 和 二 万 别 失 望 ， 你 会 喜欢 上 解构 赋值 的 。 
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9.4 解构 赋值 
解构 赋值 可 用 于 从 数组 和 对 象 中 提取 多 项 ， 并 将 它们 赋 给 变量 ， 如 代码 清单 9-19 所 示 。 
代码 清单 9-19 解构 赋值 示例 


001|// 从 数组 中 解构 
002|[a，b]j = [10, 20]; 





003T consoleeslocnka pp) 六 2O 


代码 清单 9-20 等 价 于 代码 清单 9-19。 
代码 清单 9-20 ”一 般 的 赋值 方法 


0 
002 


var a = 10; 
var b = 20; 





如 果 未 指定 var、Let 或 const， 则 默认 为 var， 如 代码 清单 9-21 所 示 。 
代码 清单 9-21 默认 关键 字 为 var 
Ea sl 


console.log(window.a); // 1 


Qo 
002 





正如 预期 的 那样 ，Let 定义 不 可 以 用 作 window 对 象 的 属性 ， 如 代码 清单 9-22 所 示 。 


代码 清单 9-22 ”1let 定义 不 可 以 用 作 window 对 象 的 属性 


了 二 
console.log(window.a); // undefined 


多 局 本 
002 





可 以 使 用 .. .rest 来 解构 ， 如 代码 清单 9-23 所 示 。 


代码 清单 9-23 ”使 用 .. ,rest 解构 


001|// 使 用 ...rest 从 数组 中 解构 

002|[a, b, ...rest] = [30, 40, 50, 60, 70]; 
003 console.log(a, b); // 30 40 

004 console.log(rest); // [50, 60, 70] 





解构 通常 用 来 提取 匹配 名 称 的 对 象 属性 ， 如 代码 清单 9-24 所 示 。 
代码 清单 9-24 ”提取 匹配 名 称 的 对 象 属性 
001 // 从 一 个 对 象 的 oranges 属 性 解构 到 oranges 


002 | Let { oranges } = { oranges : 1 上; 
003 console.log(oranges); //1 
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如 代码 清单 9-25 所 示 ， 顺 序 无 关 紧 要 ， 只 要 存在 grapes 属性 ， 其 值 就 会 


同名 变量 。 


代码 清单 9-25 ”顺序 无 关 紧 要 


001jLet fruit basket = { 
002 apples : 0, 

003 grapes : 1,， 

004 mangos : 3 

goss 

006 
007 let { grapes } = fruit_basket; 
008 
009 console.log(grapes); // 1 





被 赋 给 接收 端的 


我 们 来 提取 多 个 值 。 提 取 apples 和 oranges， 并 对 它们 进行 合计 ， 如 代码 清单 9-26 所 示 。 


代码 清单 9-26 ”提取 多 个 值 


001 
002 


let { apples, oranges } = 1{ apples : 1, oranges 
console.log(apples + oranges); // 3 








解构 不 是 隐 式 递归 的 ， 不 会 扫描 到 二 级 对 象 ， 如 代码 清单 9-27 所 示 。 
代码 清单 9-27 并 非 隐 式 递归 


001 
U02 





console.log(oranges); // undefined 


不 过 ， 可 以 耻 接 从 对 和 象 的 内 部 属性 中 提取 ， 如 代码 清单 9-28 所 示 。 


代码 清单 9-28 ”年 接 从 对 象 的 内 部 属性 中 提取 
001 Let deep = { 


002 basket: { 

003 Tromne 

004 name: "orange", 

005 shape: "round", 

006 weight: 0.2 

007 } 

008 

ool 

O10 

011 let { name, shape, weight } = deep.basket.fruit; 
012 

013 ,console.log(name); // "orange" 


014 | console.log(shape); // "round" 
015|consoLe .Log(weight); // 0.2 





Let { oranges } = { apples : 1, inner: {toranges : 


2 


2 
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如 果 未 在 对 象 中 找到 变量 ， 得 到 的 结果 就 是 undefined。 如 果 试 图 解构 对 象 中 不 存在 的 属 
性 名 ， 则 结果 如 代码 清单 9-29 所 示 。 
代码 清单 9-29 结果 为 undefined 


001 
002 


可 以 在 解构 的 同时 进行 重 命名 ， 如 代码 清单 9-30 所 示 。 
代码 清单 9-30 ”解构 与 重 命名 同时 进行 


Let { automobile: car } = { automobile: "Tesla" }; 
console.log(car); // "Tesla" 


let { apples } = { oranges ; 1 }; 
console.log(apples); // undefined 





QOL 
002 





9.4.1 使 用 spread 合并 对 象 
可 以 使 用 .. .spread 语法 来 轻松 合并 两 个 或 更 多 个 对 象 ， 如 代码 清单 9-31 所 示 。 
代码 清单 9-31 合并 对 象 


001ilet a = { p:1, q:2, m:()=>{} }; 
002 let b = { r:3, s:4, Nn:()=>{} }; 
OO =D 





对 象 c 的 内 容 是 什么 呢 ? 执行 代码 清单 9-32 看 看 。 
代码 清单 9-32 ”查看 对 象 c 的 内 容 


ee Te ee 


控制 台 输出 如 图 9-7 所 示 。 





要 证 了 5 二， 有 2 IE 关 
pm: () => {} 
pn: () => {} 
Dp 入 1 
q 2 
PP 梁 “ 洲 
ss 4 
> proto : Object 





> | 


图 9-7 控制 台 输 出 
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幸好 ， 这 并 不 仅仅 是 浅 复制 ，.. .spread 也 会 复制 舰 套 的 属性 ， 如 代码 清单 9-33 所 示 。 


代码 清单 9-33 复制 舱 套 的 属性 


001 let a = { nest:{nest:{eggs:10}} }; 
002 i let b = { eggs:5 }; 

do er er 0 

004 console.log(c); 





控制 台 输 出 如 图 9-8 所 示 。 





vi{nest: 1{.}, eggs: 5} 
eggs: 5 
vnest: 
pnest: {eggs: 10} 
> proto : Object 
> proto : Object 
| 


图 9-8 ”控制 台 输 出 





9.4.2 ”使 用 spread 合并 数组 
你 也 可 以 使 用 .. .spread 语法 来 合并 两 个 或 更 多 个 数组 ， 如 代码 清单 9-34 所 示 。 
代码 清单 9-34 合并 数组 





OA et = 2 

002 let b = [3,4]; 

Goelec cc Lo 
004|console.log(c); // [1,2,3,4] 





用 包 


10.1 闭 包 入 门 


闭 包 有 许多 种 讲解 方式 。 尺 管 本 革 的 讲解 不 能 作为 团 包 的 “圣杯 ”"， 但 我 希望 它 能 够 加 深 你 
的 理解 。 你 可 以 随意 使 用 CodePen 上 的 示例 ， 观 察 它 们 的 工作 方式 。 最 终 你 会 完全 理解 闭 包 。 


在 C 语 言及 其 他 庶 多 语言 中 ， 作 为 栈 上 目 动 内 存 管理 的 一 部 分 ， 当 函数 调用 退出 时 ， 为 该 
浮 数 分 配 的 内 存 会 被 清除 。 而 在 JavaScript 中 ， 即 使 调用 完 函 数 ， 该 函数 内 部 定义 的 变量 和 方法 
仍 会 保留 在 内 存 中 。 在 函数 执行 完 后 保留 孙 数 内 部 定义 的 变量 或 方法 的 链接 ， 这 束 古 闭 包 工作 


JavaScript 是 一 门 不 断 进化 的 语言 。 在 闭 包 出 现时 ，JavaScript 中 还 没有 类 或 私有 变量 的 
概念 。 可 以 说 ， 在 ES6 之 前 ， 闭 包 可 以 用 来 大 致 模拟 类 似 于 对 象 的 私有 方法 的 内 容 。 闭 包 是 
JavaScript 传统 编程 风格 的 一 部 分 。 这 是 面试 中 最 常见 的 问题 之 一 。 因 此 ， 如 采 不 讨论 闭 包 ， 
本 书 就 不 完整 。 











10.1.1 什么 是 闭 包 
在 也 数 退出 之 后 ， 闭 包 还 能 够 保留 对 所 有 局 部 函数 变量 的 引用 。 
如 果 对 JavaScript 中 的 作用 域 规则 和 执行 语 境 委托 控制 流 的 方式 一 无 所 知 ， 那 么 闭 包 理解 起 
来 会 很 困难 。 但 我 认为 如 果 从 简单 内 容 人 手 ， 并 看 一 些 实 例 ， 这 会 变 得 简单 一 些 。 
要 理解 闭 包 ， 至 少 需 要 理解 如 下 结构 。 这 主要 是 因为 JavaScript 允许 在 一 个 图 数 中 定义 另 一 
个 因数 。 从 技术 上 来 讲 ， 这 就 是 财 包 。 请 看 代码 清单 10-1。 
代码 清单 10-1 闭 包 的 结构 
001 1// 辽 数 global 定 义 在 与 Window 一 起 创建 的 现 有 
002 | // 的 执行 语 境 中 


ovtunetioneLoDat( an 
004 // 在 调用 gLobat 时 ， 将 为 该 函数 创建 一 个 
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005 // 新 的 执行 语 境 。 在 声明 绑 定 实例 化 的 过 
006 // 程 中 ， 在 JavaScript 解 释 器 的 内 部 ， 
007 // inner 将 会 作为 一 个 新 的 局 部 对 象 被 创 
008 // 建 ， 其 作用 域 指 向 global 的 执行 语 境 的 
009 // 变量 环境 

010 function 1Tnner() { 

oy console.log("inner'"); 

012 i 

013 inner(); // 调用 ijnner 

014 } 

lS 

01l6 global(); // "inner" 





在 代码 清单 10-2 中 ， 全 局 函数 sendEmail 定义 了 一 个 匿名 图 数 ， 并 将 其 赋 给 变量 send。 
该 变量 仅 对 sendEmait 函数 的 作用 域 可 见 ， 而 对 全 局 作用 域 不 可 见 。 


代码 清单 10-2 在 JavaScript 中 ， 内 部 函数 可 以 访问 其 所 在 的 函数 作用 域 中 定义 的 变量 


001 function sendEmail(from, sub, message) { 
002 Let msg = "S${sub}" > "${message}" received from ${from}. ; 














003 let send = function() { console.log(msg); } 
004 send(); 

005 } 

006 


007 .sendEmail('Jason', 'Re: subject', 'Good news.'); 
当 我 们 调用 sendEmail 时 , 它 会 创建 并 调用 send 方 法 。 全 局 作用 域 无 法 直接 调用 send 方 法 。 
控制 台 输 出 如 图 10-1 所 示 。 











"Re: subject" > "Good news." received from Jason. 


> | 
图 10-1 控制 台 输出 


我 们 可 以 通过 从 函数 返回 私有 方法 (内 部 函数 六 来 公开 对 它们 的 引用 。 在 代码 清单 10-3 中 ， 
第 004 行 并 不 是 调用 send 方法 ， 而 是 返回 对 它 的 引用 。 除 此 之 外 ， 人 代码 清单 10-3 中 的 示例 与 
代码 清单 10-2 中 的 示例 完全 相同 。 


代码 清单 10-3 返回 send， 而 非 调 用 它 。 这 样 就 可 以 在 全 局 作用 域 中 创建 该 私有 方法 的 引用 


001 function sendEmail(from, sub, message) { 

002 Let msg = "$f{sub}" > "${message}" received from ${from}. ; 
003 let send = function() { console.log(msg); } 

004 return send; 
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005|} 
006 
007|// 创建 对 sendEmail 的 引用 

008 let ref = sendEmail('Jason', 'Re: subject', 'Good news.'); 
009 
010 |// 按 引 用 名 进行 调用 
0 


现在 ， 我 们 就 可 以 在 全 局 作用 域 中 通过 引用 来 调用 send 方法 。 即 使 在 调用 完 sendEmail 
纯 数 之 后 ， 变 量 msg 和 send 仍 会 保留 在 内 存 中 。 在 C 语言 中 ， 它 们 会 从 栈 内 存 中 目 动 清除 ， 
我 们 将 无 法 再 次 访问 它们 。 而 JavaScript 并 非 如 此 。 


我 们 再 来 看 一 个 示例 。 如 代码 清单 10-4 所 示 ， 首 先 定义 全 局 变量 print、set、increase 


和 decrease。 











代码 清单 10-4 又 一 个 示例 





001 Let print, set, increase, decrease; 

Oz 

003 function manager() { 

004 console.log("manager();"); 

005 let number = 15; 

006 print = function() { console.log(number) } 
OO set = function(value) { number = value } 
008 increase = function() { number++ } 

009 decrease = function() { number-— } 

010|} 





如 代码 清单 10-5 所 示 ， 为 了 将 匿名 范 数 赋 给 全 局 因数 变量 ， 我 们 至 少 需要 运行 一 次 manager。 
代码 清单 10-5 set(755) 将 number 的 值 重 置 为 755 








012 manager (); // 初始 化 manager 

le oe | Be 0 

014 for (let 1 = 0; 1 < 200; i++) Tincrease() ; 
Os 25 

016 decrease() ; 

OE7 Drine( 7 ， // 214 

OTS8lset (T7595). 

QT9oNr me pa Me 

020 let old_print = print; // 保存 print 的 引用 
G2 

022 manager (); // 再 次 初始 化 manager 

G2 nn Ss 

024joLd_print(); // 755 


Gy 
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控制 台 输 出 如 图 10-2 所 示 。 





manager( ) ; 


15 


manager(); 
15 
Pa 
> | 
图 10-2 ”控制 合 输出 





讲解 
在 第 一 次 调用 manager 之 后 ， 执 行 的 函数 和 所 有 的 全 局 引用 都 链接 到 了 它们 各 自 的 匿名 了 
数 。 这 样 就 创建 了 我 们 的 第 一 个 闭 包 。 现 在 ， 我 们 试 着 使 用 全 局 方法 ， 来 看 看 会 发 生 什么 。 


我 们 调用 increase、decrease 和 和 set， 来 修改 manager 国 数 中 定义 的 变量 number 的 值 。 
每 一 步 都 会 使 用 print 来 打印 该 值 ， 以 确认 它 已 经 改变 了 。 

















10.1.2 ”漂亮 的 闭 包 


消 数 式 编程 使 用 闭 包 ， 其 原因 与 面向 对 象 编程 使 用 私有 方法 类 似 。 闭 包 以 子 数 的 形式 为 对 
象 提供 API 方法。 


如 果 根 据 这 个 思路 进一步 创建 一 个 看 起 来 很 漂亮 的 闭 包 ,返回 多 个 方法 , 而 不 只 是 一 个 方法 ， 
那 会 怎么 样 呢 ? 请 看 代码 清单 10-6。 


代码 清单 10-6 ”看 起 来 很 漂 完 的 闭 包 


001 Let get = null; // 全 局 getter 函 数 的 变量 
002 
003|function wtosure() 1 
004 
005 this. inc = 0; 

006 get = () => this.inc; // getter 
007 
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008 function 1Tncrease() { this.inc++;i 上 
009 function decrease() { this.inc--; } 
010 function set(v) { this.inc = v; } 

a i tonection FESEtLY 六 thHiss ME 二 QE + 
全 于 器 function del() { 

013 delete this.inc; // 变 为 undefined 
014 this.inc = null; // 再 将 其 重 置 为 null 
015 console.log("this.iinc deleted"); 
016 } 

中 function readd() { 

018 // 如 果 为 nuULL 或 undefined 

019 1T 《4 二 ns 

020 this.inc = "re-added"; 

包公 由 } 

0Q22 

023| // 同时 返回 多 个 方法 

024 return [increase, decrease, set, reset, del, readdl]; 
025|} 





del 方法 会 从 对 和 象 中 彻底 删除 inc 属性 ， 而 readd 会 重新 添加 该 属性 。 简 单 起 见 ， 这 里 并 
没有 执行 防 错 处 理 。 而 如 末 inc 属性 已 经 被 删除 ， 试 图 访问 这 些 方法 时 ， 将 会 发 生 引用 错误 。 


初始 化 闭 包 如 代码 清单 10-7 所 示 。 
代码 清单 10-7 初始 化 闭 包 


032 | Let f = closure(); 











变量 f 现在 指 癌 一 组 公开 的 方法 。 通 过 赋 给 唯一 的 函数 名 ， 它 们 就 进入 了 全 局 作用 域 ( 见 
代码 清单 10-8 )。 


代码 清单 10-8 为 各 个 方法 赋 上 唯一 的 函数 和 





034|Let inc = f[0]; 
035|Let dec = f[1]; 
036jLet set = f[2]; 
037|Let res = f[3]; 
038 | let del = f[4]; 
039| Let add = f[S5]; 





如 代码 清单 10-9 所 示 ， 现 在 可 以 调用 它们 ， 来 修改 隐藏 的 inc 属性 。 


代码 清单 10-9 调用 各 个 方法 
Sal | "Tn 4 


da42 Tnet a 了 2 
人 | 





与 
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044 dec(); // 
45 |get()s fy 
046 set(7);// 
047| get(); // 
048 res(0);// 
049|get(); // 


最 后 ， 可 以 使 用 del 方法 删除 该 属性 本 身 ， 如 代码 清单 10-10 所 示 。 
代码 清单 10-10 调用 del 方法 
// 删除 属性 


del(0);// null 
Ee no 


CB CD 4 BY 





os51 
052 
052 








这 时 调用 其 他 方法 将 会 发 生 引 用 错误 ， 因 此 ， 我 们 将 inc 属性 重新 添加 到 对 和 象 中 ( 见 代 人 码 
清单 10-11 )。 
代码 清单 10-11 添加 inc 属性 


// 读 取 inc 必 性 
add() ; 
get(); // "re-added" 


055 
056 
0.57 





如 代码 清单 10-12 所 示 ， 将 inc 属性 重 置 为 0， 并 递增 1。 


代码 清单 10-12 操作 inc 属性 


人 
TEL /7 工 
Eocene 


959 
060 
Yel 





10.1.3” 闭 包 小 结 
如 果 在 一 个 函数 中 声明 另 一 个 函数 ， 就 创建 了 闭 包 。 


当 调 用 的 函数 包含 力 一 个 函数 时 ， 就 会 新 建 执行 语 境 ， 它 持 有 所 有 局 部 变量 的 全 新 副本 。 
通过 链接 到 全 局 作用 域 中 定义 的 变量 名 ， 或 在 外 层 函 数 中 使 用 return 关键 字 返 回 闭 包 ， 就 可 
以 在 全 局 作用 域 中 创建 它们 的 引用 。 


闭 包 使 你 可 以 持 有 所 有 局 部 函数 变量 的 引用 ， 在 函数 退出 后 仍 可 使 用 。 














注意 ; new Function 构造 函数 不 会 创建 闭 包 。 这 是 因为 使 用 new 关键 字 创建 的 对 象 会 创建 一 
个 独立 的 语 境 。 


10.2 
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参数 个 数 


参数 个 数 是 指 函 数 接受 的 参数 个 数 。 通 过 < 函数 名 >.Length 属性 可 以 查看 函数 的 参数 个 
数 ( 见 代码 清单 10-13 )。 


代码 清单 10-13 ”查看 函数 的 参数 个 数 


od 
O002 
003 
004 
005 
006 
G0 





// 定义 一 个 带 3 个 参数 的 逊 数 
function f(a,b,c) {} 


// 获取 函数 的 参数 个 数 
Let arity = f.Length ; 


cansole Lop(tar Tey 3 


10.3 柯 里 化 
在 JavaScript 中 ， 阴 数 是 表达 式 。 这 意味 痢 函 数 可 以 返回 为 一 个 函数 。 在 前 面 ， 我 们 学 习 了 


闭 包 模式 。 


柯 里 化 是 一 种 立即 求 值 并 返回 为 一 个 函数 表达 式 的 模式 。 通 过 定义 时 立即 返回 所 有 


内 部 函数 来 链接 闭 包 ， 就 可 以 创建 箱 里 化 也 数 。 代 码 清 单 10-14 展示 了 柯 里 化 函数 的 示例 。 
代码 清单 10-14 ” 柯 里 化 函数 


Qo 
002 
003 
004 
85 
006 
gz 
008 
0909 
O010 
ee 
O12 





let planets = function(a) { 
return function(b) { 
return “Favorite planets are "+ aand Tb, 
}; 
ey 


Let favoritePlanets = planets("Jupiter"); 


// 使 用 不 同 的 参数 来 调用 柯 里 化 函数 
favoritePlanets("Earth"); 
favoritePlanets("Jupiter"); 
favoritePplanets("Saturn"); 


痕 数 planets 会 返回 一 个 匿名 因数 。 因 此 ， 当 函数 ptanets 按 参数 "Jupiter" 赋 给 
favoritePLanets 时 ， 它 会 根据 第 2 个 参数 再 次 进行 调用 。 


图 10-3 展示 了 示例 中 的 3 个 柯 里 化 函数 的 结 





CO 
CO 
涉 
三 
地 
于 
(3 


Favorite planets are Jupiter and Earth 

Favorite planets are Jupiter and Mars 

Favorite planets are Jupiter and Saturn 
> | 


图 10-3 ”控制 台 输 出 





如 代码 清单 10-15 所 示 ， 在 第 一 次 调用 之 后 ， 内 部 函数 会 被 立即 调用 。 


代码 清单 10-15 “调用 柯 里 化 函数 


// 使 用 两 个 参数 来 调用 柯 里 化 函数 
planets("Jupiter")("Mars"); 


Qo 
002 





结果 如 图 10-4 所 示 。 
Favorite planets are Jupiter and Mars 
> | 
图 10-4 ”控制 台 输 出 





柯 里 化 被 认为 是 函数 式 编程 风格 的 一 部 分 。 因 此 ， 这 种 老式 的 柯 里 化 语法 可 以 改写 为 更 人 
洁 的 租 头 孙 数 格式 也 就 不 足 为 奇 广 ( 见 代码 清单 10-16 )。 
代码 清单 10-16 ”将 柯 里 化 函数 改 号 为 季 头 函数 


001jLet planets = (a) => (b) => "Planets are " + a+" and " + b; 


002 
o03lplanets("Venus") ("Mars").: 


结果 如 图 10-5 所 示 。 
Planets are Venus and Mars 
> | 
图 10-5 控制 合 输出 








循环 是 处 理 列表 的 基础 ,循环 的 主要 目的 是 迭代 多 条 或 多 组 语句 。 过 代 在 软件 开发 中 很 弟 见 ， 
它 表 示 多 次 重复 同一 个 动作 。 

循环 引入 了 和 返 代 器 的 概念 。 一 些 内 藤 类 型 是 可 迭代 的 。 和 迭代 带 可 以 传递 给 for.. ,of 循环 ， 
而 不 是 传统 的 for 循环 。 迭 代 对 象 抽象 了 列表 的 索引 值 ， 帮 助 你 集中 精力 来 解决 问题 。 


数组 就 是 迭代 类 型 ， 而 对 象 则 不 是 〈 对 象 是 枚 举 类 型 )。 迭代 类 型 对 集合 中 的 各 项 顺序 有 要 
求 。 这 就 是 数组 拥有 各 项 索引 的 原因 。 枚 誉 类 型 并 不 要 求 达 代 时 属性 按 一 定 的 顺序 出 现 。 











11.1 JavaScript 中 的 循环 类 型 


JavaScript 包含 不 同 的 迭代 方式 ， 其 中 既 包 括 传统 的 while 循环 和 for 循环 ， 也 包括 偶 
问 于 函数 式 编程 风格 的 迭代 虽 一 一 使 用 数组 的 高 阶 函 数 。 和 常 见 的 迭代 如 有 for、for.. .of、 
for...in、while 和 Array.forEach。Array 的 一 些 方法 也 可 以 看 作 迭 代 问 ， 如 ,values、 
.keys、.map、.every、.some、.filter、.reduce 等 。 它 们 被 称 为 高 阶 函 数 ， 因 为 它们 将 
另 一 个 函数 作为 参数 。 


11.1.1 ”递增 和 违 减 


循环 通 笛 用 来 过 历 对 象 列表 ， 并 更 新 它们 的 属性 。 循 环 可 以 用 来 过 滤 对 象 ， 使 列表 缩减 为 
更 有 意义 的 项 。 循 环 还 可 以 将 一 组 值 减少 为 单个 值 ， 如 代码 清单 11-1 所 示 。 


代码 清单 11-1 for 循环 


aoet mss = 2 
002 

003| // 使 用 for 和 人 循环 将 所 有 的 数字 加 起 来 
004| let A = 0 

osltorT(let TT = On SS. TEN) 
006| A += miles[i]; 

oor7lceonsole log(A /99 
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如 代码 清单 11-2 所 示 ， 你 可 以 实现 一 个 具有 相同 效果 的 reducer。 


代码 清单 11-2 ”实现 与 循环 具有 相同 效果 的 reducer 


009| // 使 用 reducer Array.reduce 方 法 ， 将 所 有 的 数字 加 起 来 

010| const R = (accumulator, value) => accumulator + value; 
011| const result = miles.reduce(R); 

012| console.log(result); // 99 








11.1.2 ”动态 生成 HTML 元 素 
如 代码 清单 11-3 所 示 ， 动 态 创建 一 些 HTML 元 素 ， 来 填充 UI 视图 。 
代码 清单 11-3 ”动态 创建 HTML 元 素 


001| // 向 页 面 添加 10 个 元 素 
002| for (let 1 = 0; i1 < 10; i++) { 


003 // 创建 一 个 新 的 HTML 元 素 

004 Let element = document.createElement("div"); 
005 // 将 内 部 HIML 播 入 到 元 素 中 

006 element.innerHTML = "element ”+ 1; 

Ts // 将 创建 的 元 素 添 加 到 文档 中 

008 document.appendChild(element); 

009|} 


这 上段 代码 会 将 10 个 div 元 素 添 加 到 文档 中 。appendChild 方法 可 以 用 来 创建 读 套 元 素 。 


11.1.3 ” 泻 染 列表 


循环 通常 与 泻 染 列表 一 起 使 用 。 泻 染 只 是 在 屏幕 上 显示 一 些 内 容 。 在 软件 开发 中 ， 有 时 需 
要 显示 项 目 列表 。 





11.1.4 动态 排序 的 表格 


动态 创建 整个 表 让 你 可 以 使 用 Array.entries 方 法 和 Array.sort 方 法 按 列 对 值 进行 排序 。 
在 某 些 情况 下 ， 如 果 表 的 列 中 存储 的 是 对 象 属性 ， 而 不 是 数组 元 素 ， 那 么 就 需要 你 自己 编写 排 
序 函 数 。 但 根据 数据 集 的 不 同 ， 这 有 时 是 个 好 主意 ， 有 时 则 不 是 。 











11.1.5 ”注意 事项 


在 定义 菜 种 数据 布局 之 前 ， 你 无 法 轻 史 地 决定 列表 的 处 理 方式 。 因 此 ， 选 择 要 使 用 哪 种 循 
环 类 型 ， 通 第 是 由 其 他 决定 或 目 定 义 的 数据 结构 的 布局 来 决定 的 。 
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11.2 for 循环 
for 循环 语法 包含 3 种 语法 风格 ， 如 代码 清单 11-4 所 示 。 


代码 清单 11-4 3 种 风格 的 for 循环 
001| // 空 体 for 逢 环 


002| for (initialize; condition; increment); 

yD 

004| // 选 代 单条 语 锐 

005| for (initialize; condition; increment) single_statement; 
006 

ew WA 

008| for (initialize; condition; increment) { 





009 multiple; 
od10 statements,; 
wr: 





for 循环 需要 3 条 语句 ， 它 们 之 间 使 用 分 号 进行 分 隔 ， 它 们 可 以 是 任何 合法 的 JavaScript 语 
句 、 国 数 调用 ， 甚 至 也 可 以 是 空 语 句 。 


基本 实现 中 通常 使 用 的 模式 有 初始 化 计数 器 、 测 试 条 件 ， 以 及 递增 或 递减 计数 话 。 





11.2.1 基于 零 索 引 的 计数 咽 


将 For OPE A I 是 一 个 非 第 棒 的 想法 ， 因 为 大 部 分 列表 
(如 数组 ) 都 基于 零 索 引 ， 其 第 一 项 是 array[0] ， 而 不 是 array[1]。 这 可 能 需要 一 段 时 间 
来 适应 。 








11.2.2 ”无限 for 循环 


虽然 定义 的 for 循环 可 以 没有 软 认 语句 , 但 是 这 样 做 会 创建 一 个 无 限 循环 , 让 程序 骨 演 ( 见 
代码 清单 11-5 )。 


代码 清单 11-5 ”无限 for 循环 


To ole 
002 console.log("Mhi"m); // 无 限 for 篇 环 ， 请 不 要 这 样 做 


或 许 你 也 不 想 这 么 做 , 但 因为 某 些 原因 这 种 情况 不 可 避免， 那么 这 时 最 好 使 用 while 循环 。 





92 第 11 章 循 环 


11.2.3 ”多 条 语句 


除了 分 号 以 外 ， 多 条 语句 之 间 也 可 以 使 用 分 隔 。 在 代码 清单 11-6 中 ，inc 函数 用 于 递 
增 全 局 计数 器 变量 的 值 。 请 注意 两 条 语句 的 组 合 是 if+，inc()。 


代码 清单 11-6 ”多 条 语句 的 示例 


001| Let counter = 0; 








002 

003| function nc() { countert++, 1 

O004 

os Tor le = 1 < TO TC( 
O006 


007liconsole. .log(counter): /A// 1 


该 空 体 for 循 环 计数 10 次 ,实际 值 是 在 inc 图 数 中 递增 的 。 这 只 是 执行 多 条 语句 的 示例 之 一 ， 
在 这 种 情况 下 ， 我 们 应 该 尽量 避免 使 用 全 局 变量 。 








11.2.4 ”这 增 数 字 





如 代码 清单 11-7 所 示 ， 循环 的 一 个 基本 用 途 是 递增 数字 。 
代码 清单 11-7 递增 数字 


001| Let counter = 0; 


002 

votor (Lec TO 1 < LO Tin) 
004 counter++; 

O05 


006| counter; // 10; 


11.2.5 ”for 循环 和 Let 作用 域 
无 大 括号 的 for 循环 语法 对 Let 关键 字 并 不 友好 。 代 码 清单 11-8 中 的 代码 会 发 生 错 误 。 
代码 清单 11-8 ”无 大 括号 的 for 循环 


Oe 0 




















Let 变量 的 定义 中 不 可 以 缺少 括号 。 使 用 Let 关键 字 定 义 的 所 有 变量 都 需要 有 自己 的 局 部 
作用 域 。 修 改 后 的 代码 如 代码 清单 11-9 所 示 。 


代码 清单 11-9 有 大 括号 的 for 循环 


Tr 
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11.2.6 ” 骨 套 for 循环 


由 于 for 循环 本 身 就 是 一 条 JavaScript 语句， 因此 它 也 可 以 作为 男 一 个 for 循环 的 迭代 
语句 。 这 种 舰 套 for 循环 通常 用 来 处 理 二 维 网 格 ， 如 代码 清单 11-10 所 示 。 
代码 清单 11-10 “ 髋 套 for 循环 


ool se 全 区 
002 for (let x = 0; x < 2; x++) 
O03 CONSOLe [LOPE(Y sy 


控制 台 输 出 如 代码 清单 11-11 所 示 (Xx 与 y 的 所 有 组 合 )。 
代码 清单 11-11 控制 台 输 出 





(020m EO 
002|1 已 
ga Ll 
004|1 1 


11.2.7 ”循环 的 长 度 
如 代码 清单 11-12 所 示 , 条 件 语句 会 一 直 检 查 计数 器 是 否 达 到 限制 , 如 果 达 到 , 则 停止 循环 。 


代码 清单 11-12 ”执行 3 次 的 for 循环 


QoL| For (Let | 二 9 ; 本 站 SR i++) { 
002 ComnseLS Log(" Loop 
003| } 


这 个 简单 的 循环 将 会 在 控制 全 上 打印 3 次 "Loop."， 如 代码 清单 11-13 所 示 。 
代码 清单 11-13 ”控制 台 输 出 


oom oope 
002 "Loop." 
oom Looper 


如 代码 清单 11-14 所 示 ， 如 果 要 执行 多 条 语句 ， 可 以 加 上 大 括号 。 


代码 清单 11-14 ”执行 多 条 语句 


是 二 














002 Let loop = "loop."; 
003 console.log(loop); 
004| } 


控制 台 输 出 与 前 面 的 示例 相同 。 
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11.2.8” 跳 步 
continue 关键 字 可 以 用 来 跳 过 一 次 迭代 步骤 ， 如 代码 清单 11-15 所 示 。 


代码 清单 11-15 ”使 用 continue 关键 字 跳 步 
oo01ilfor (let 1 = 0 1T<3. 17) 


002 if (1 == 1) 

003 continue; 
004 console. log(1i); 
加 05| 








该 for 循环 的 输出 如 代码 清单 11-16 所 示 ( 请 注意 跳 过 了 1 )。 
代码 清单 11-16 ”控制 台 输 出 


gog 
002| 2 





continue 关键 字 告 诉 代 码 流 程 跳 到 下 一 次 迭代 ， 而 不 再 执行 当前 for 循环 作用 域 的 欠 代 
步骤 中 剩 下 的 语句 。 
11.2.9 ”提前 中 断 

break 关键 字 可 以 用 来 中 断 for 循环 〈 见 代码 清单 11-17 )。 


代码 清单 11-17 使 用 break 关键 字 中 断 循 环 
qouteoT(tec m= 9 TO 


002 console.log("Loop."); 
003 break ; 
004| } 


请 注意 ， 这 里 省 略 了 条 件 语 句 。 该 循环 由 语句 本 里 的 显 式 命令 来 中 断 。 这 时 ， 该 for 循环 
仅 同 控制 台 打 印 一 次 "Loop."。break 关键 子 会 在 循环 中 跳出 。 你 也 可 以 设置 跳出 条 件 ( 参见 
下 一 个 示例 )。 





11.2.10” 自 定义 中 断 条 件 


可 以 不 使 用 for 循环 中 用 分 号 分 阳 的 所 有 3 条 语句 。 将 条 件 测试 移 到 for 循环 体 中 ， 而 不 
在 for 语句 的 括 写 中 进行 测试 ， 这 样 做 是 完全 合法 的 。 

代码 清单 11-18 中 的 示例 省 略 了 中 间 的 语句 ， 中 间 的 语句 通常 是 为 计数 带 创 建 条 件 测 试 ， 而 
我 们 将 其 蔡 换 为 循环 内 部 的 条 件 ， 当 i 大 于 1 时 ， 跳 出 循环 。 
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代码 清单 11-18 ”省 略 中 间 语 句 
ooilfor (let 1 = 0 1+t+) 1 


002 console.log("loop, 1 = " + 1); 
003 el 

004 break; 

005|} 


如 果 没 有 for 循环 内 部 的 if 语句， 该 循环 将 无 限 执行 下 去 ， 因 为 这 里 没有 其 他 的 条 件 来 
中 断 循环 。 控 制 侣 输出 如 代码 清单 11-19 所 示 。 


代码 清单 11-19 ”控制 台 输 出 











00L Loop Te 0 
002| Loop, 1 = 1 
003| loop, 1 = 2 








单词 Loop 打印 了 3 次 。 由 于 这 里 的 条 件 是 i 大 于 1， 因 此 你 可 能 以 为 该 文本 最 多 打印 2 
次 ， 而 实际 上 它 打 印 了 3 次 ! 这 是 因为 计数 是 从 0 开始 的 ， 而 不 是 1， 并 且 条 件 的 上 限 是 2， 
而 不 是 1。 

11.2.11 ” 跳 转 到 标签 


在 JavaScript 中 ， 可 以 在 语句 的 前 面 设 置 “ 标 签名 :”， 来 标记 语句 。 由 于 for 循环 也 是 一 
条 语句 ， 因 此 也 可 以 标记 for 循环 。 


尝试 在 内 部 循环 中 递增 c 的 值 。 通 过 选择 中 断 循环 跳 转 到 inner 标签 还 是 mark 标签 ， 我 
们 可 以 改变 for 循环 的 执行 方式 。 


代码 清单 11-20 中 的 示例 是 跳 转 到 mark : 标签 ， 输 出 结果 是 11。 
代码 清单 11-20” 跳 转 到 mark: 标签 


001| let c = 0; 
002| mark: for (let 1 = 0; 1 < 5; 1++) 


003 Tnner fory(Lee ls 0 < SI 
004 C++ ; 

005 gh 

006 break mark; 

oy 


008| console.log(c); // 11 


代码 清单 11-21 中 的 示例 是 跳 转 到 inner: 标签 ， 输 出 结果 是 21。 
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代码 清单 11-21 ” 跳 转 到 inner: 标签 


001| let c = 0; 
002| mark: for (let 1 = 0; 1 < 5; 1++) 


003 Tne or le 60 5 
004 C++， 

005 if (1 == 2) 

006 break inner ; 

OO7 


上 
008| console.log(c); // 21 


由 于 内 部 循环 的 执行 流程 跳 转 的 标签 不 同 ， 因 此 这 两 个 示例 在 逻辑 上 是 不 一 样 的 。 





11.2.12 ”跳出 标记 的 块 级 作用 域 
可 以 使 用 break 关键 字 跳 出 标记 的 非 for 循环 的 常规 块 级 作用 域 ， 如 代码 清单 11-22 所 示 。 


代码 清单 11-22 ”跳出 块 级 作用 域 
OULeeE :At 


002 console.log("before"); 
003 break block; 

004 console.log("ofter"); 
加 5| 


控制 台 输 出 如 代码 清单 11-23 所 示 。 
代码 清单 11-23 ”控制 台 输 出 


001| "before" 





执行 流程 永远 部 不 会 执行 到 "after"。 


11.3 for.. .of 循环 


当 人 处 理 数 组 或 对 象 属性 时 ,使 用 市 索引 的 达 代 作 ( 如 for 循环 ) 会 变 得 很 麻烦 ， 当 它们 的 
个 数 未 知 时 尤其 如 此 。 


for.. .of 循环 可 以 解决 该 问题 。 我 们 先 来 看 一 个 使 用 了 for.. .of 循环 和 生成 大 的 高 级 示 
例 ， 然 后 再 讨论 其 他 一 些 人 简单 的 用 例 。 
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11.3.1 for.. ,of 和 生成 器 

有 时 ， 你 也 许 想 同时 使 用 for 循环 和 生成 器 ， 生 成 器 是 加 上 function* 关键 字 的 一 种 特殊 
的 函数 。 

当 调 用 生成 器 函数 时 ， 它 内 部 的 多 条 yietLd 语句 并 不 会 同时 执行 ， 这 与 你 通常 的 预期 有 
所 不 同 。 只 有 第 一 条 yield 语句 被 执行 。 要 执行 语句 2 和 语句 3， 就 必须 再 次 调用 生成 名 国 数 
(两 次 以 上 )。 在 内 部 ， 每 次 调用 生成 右 函 数 时 ，yield 语句 计数 大 都 会 自动 递增 。 

生成 需 异 步 执行 yield 语句， 即便 生成 硕 图 数 内 部 的 代码 是 线性 的 也 如 此 。 这 是 为 了 计 代 
三 与 其 他 方法 (如 XMLHttpRequest、Ajax 等 ) 相 比 更 具 可 读 性 ( 见 代 人 码 清 单 11-24 )。 





代码 清单 11-24 ”生成 器 函数 
001| // 生成 器 吕 数 


002| function* generator() { 


003 yield 1; 

004 yield 2; 

005 yield 3; 

006| } 

O007 

008| for (let value of generator() ) 
009 console.log(vaolue); 


代码 清单 11-24 中 的 代码 相当 于 手动 调用 3 次 生成 课 ( 当 你 想 手 动 递增 生成 器 时 ， 只 需 确 
保 先 将 其 赋 给 另 一 个 变量 即 可 )， 如 代码 清单 11-25 所 示 。 


代码 清单 11-25 ”手动 调用 3 次 生成 带 
001| let gen = generator() ; 
002 
003| console.log(gen.next().value); 
004| console.log(gen.next().value); 
005| console.log(gen.next().value); 


上 述 两 种 情况 的 控制 台 输 出 都 如 代码 清单 11-26 所 示 。 
代码 清单 11-26 ”控制 台 输 出 


da 
002 2 
Oo 


生成 带 是 一 次 性 函数 。 不 可 以 像 对 常规 函数 那样 ， 在 执行 完 最 后 一 条 yield 语句 之 后 试图 
多 次 章 复 使 用 生成 作 孙 数 。 
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11.3.2 for...of 和 字符 串 


字符 串 是 可 和 迭代 的 。 可 以 使 用 for.. .of 循环 来 迭代 字符 串 的 每 个 字符 ， 如 代码 清单 11-27 
所 示 。 
代码 清单 11-27 使 用 for.. .of 循环 迭代 字符 品 


001| let string = 'text'; 

002 

003| for (let value of string) 
004 console.log(value), 


控制 台 输 出 如 代码 清单 11-28 所 示 。 
代码 清单 11-28 ”控制 台 输 出 


Co 
002| '@e" 
GO x 
004| 七 


11.3.3 ”for,, .of 和 数组 
假设 我 们 有 如 代码 清单 11-29 所 示 的 一 个 数组 。 


代码 清单 11-29 ”定义 一 个 数组 
wotLet arrayv = lo 2 





可 以 迭代 该 数组 ， 而 无 须 创 建 索 引 变 量 。 当 到 达 数 组 的 末尾 时 ， 循 环 将 自动 结束 ( 见 代 码 
清单 11-30 )。 
代码 清单 11-30 使 用 for.. .of 御 环 迭代 数组 


Uo 
U02 


for (let value of array) 
console.log(value); 





控制 台 输 出 如 代码 清单 11-31 所 示 。 


代码 清单 11-31 控制 台 输 出 


0 
出 
2 


go01 
002 
Yos 
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11.3.4 ” for.. .of 和 对 象 
如 果 可 以 使 用 for. . .of 循环 来 迭代 对 象 的 属性 ， 那 就 太 好 了 ， 是 吧 ? 请 看 代码 清单 11-32。 


代码 清单 11-32 使 用 for,. .of 循环 和 闪 代 对 象 


ooLiLecroDTectas a DC 

002 

003| for (Let vaLue of object) // 错误 : 对 象 是 不 可 从 代 的 
004 console.log(value); 





for.,. .of 仅 处 理 可 迭代 的 值 。 对 象 是 不 可 迭代 的 ( 它 拥有 可 枚 举 的 属性 )。 解 决 方案 之 一 
是 在 for.. ,of 循环 中 使 用 对 象 之 前 ， 先 将 其 转换 为 可 迭代 对 象 。 
11.3.5 ”for.. .of 循环 和 转换 的 可 和 迭 代 对 象 


作为 补救 措施 ， 可 以 先 使 用 一 些 内 置 的 对 象 方法 ， 如 .key、.values 或 .entries, 将 对 
象 转换 为 可 迭代 对 象 ， 如 代码 清单 11-33 所 示 。 
代码 清单 11-33 ”将 对 象 转换 为 可 迭代 对 象 


001| let enumerable = { property : 1, method : () => {} }; 
002 


003| for (let key of Object.keys( enumerable )) 
004 console. log(key); 
O05 


006| Console Output: 
007| > property 
008| > method 


009 

010|for (let value of Object.vaLues( enumerable )) 
ml console.log(value); 

012 

013| Console Output: 

01al> 1 

ous 

016 

017| for (let entry of Object.entries( enumerable )) 
018 console. log(entry); 

019 


020| Console Output: 
ee el 3 
022|> (2) [meth ， 了 () 








这 也 可 以 不 使 用 对 象 转换 方法 ， 而 使 用 for,, ,in 循环 来 实现 。 下 一 节 将 具体 介绍 。 1 
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11.4 for.. .in 循环 


for.. .of 循环 〈 人 参见 上 一 六 ) 只 接受 可 友 代 的 值 。 除 非 先 将 对 象 转 换 为 可 迭代 对 象 ， 否 则 
for.. .of 循环 将 无 法 使 用 。 


for...in 人 循环 处 理 可 枚 举 的 对 象 属 性 。 对 于 迭代 对 象 属性 来 说 ,这 是 一 种 更 佳 的 解决 方案 。 
你 应 该 使 用 for... in 循环 来 处 理 对 象 ， 如 代码 清单 11-34 所 示 。 


代码 清单 11-34 ”使 用 for.. .in 循环 处 理 对 象 
001| Let object = { 








002 -Ey 
003 DD: 2. 

004 Cs 总 

005 method: () => { } 

006| 上; 

oy 

008| for (let value 1n object) 

009 console.log(value, object[value]); 
O10 

011| // 控制 台 输出 (请 注意 ， 方 法 也 是 可 枚 举 的 ) 

012 | 工 

外 

014|3 

OT 


for...in 循环 只 达 代 可 枚 举 的 对 象 属性 。 尺 绾 所 有 的 对 象 属性 都 存在 于 对 和 象 之 中 ,但 并 非 
所 有 的 对 象 属性 都 是 可 枚 举 的 。for.. .in 迭代 器 将 跳 过 所 有 不 可 枚 举 的 属性 。 


在 for.,.in 循环 的 输出 中 不 会 出 现 构造 毅 数 和 原型 属性 。 尽 管 它们 也 存在 于 对 象 之 中 ， 
但 被 认为 是 不 可 枚 举 的 。 


11.5 ” while 循环 

while 循环 会 执行 无 限 次 迭代 ， 直 至 指定 的 条 件 (只 有 一 个 ) 变 为 faLse。 这 时 ， 循 环 将 
停止 ， 执 行 流 程 将 恢复 ， 如 代码 清单 11-35 所 示 。 
代码 清单 11-35 while 循环 


001|while (condition) { 
002 /* 执行 菜 些 操作 ， 直 至 条 件 为 false */ 
eee 


如 代码 清单 11-36 所 示 ， 当 条 件 变 为 false 时 ，whilte 循环 将 目 动 停止 。 
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代码 清单 11-36 执行 5 次 的 while 循环 


让 0 加 | 关 = ce 9 
002| while (c++ < 5) 
003 CoOnsoles lopte). 


控制 台 输 出 如 代码 清单 11-37 所 示 。 
代码 清单 11-37 ”控制 台 输 出 


Oro el 
002 
903S 
004 
SS 





nn 上 


在 循环 中 可 以 测试 第 2 个 条 件 。 根 据 需 要 ， 可 以 提前 终止 循环 〈 见 代码 清单 11-38 )。 


代码 清单 11-38 ”提前 终止 循环 
O01llwhile (condition 1) 1: 


002 1if (condition 2) 
003 break ; 
004| } 


while 和 continue 
continue 关键 字 可 以 用 来 跳 步 ， 如 代码 清单 11-39 所 示 。 


代码 清单 11-39 使 用 continue 关键 字 跳 步 
GOTllet en = 0. 


002 

Dol wiile (cr < T1000 | 
004 下 全 并) 

O00s continue,; 
006 console.log(c); 
ew 


控制 台 输 出 如 代码 清单 11-40 所 示 。 
代码 清单 11-40 ”控制 台 输 出 


到 本 





请 记 住 ， 这 只 是 示例 。 在 实际 中 ， 这 会 被 认为 是 糟糕 的 代码 ， 因 为 if 语句 仍然 会 被 执行 
1000 次 。 控 制 台 仅 在 c == 0 时 打印 1。 如 采 要 提前 退出 ， 请 使 用 break。 








数组 和 字符 串 


许多 数组 方法 是 迭代 人 帮 。 你 应 该 使 用 内 置 的 数组 方法 ， 而 不 是 将 数组 传递 给 for 循环 或 
while 循环 。 数 组 方法 通常 具有 更 简洁 的 语法 ， 并 且 都 附加 到 Array .prototype 属性 中 。 这 和 意 
味 看 可 以 直接 通过 数组 对 象 ( 如 Array.forEach ) 或 数组 字面 量 来 执行 数组 方法 (如 [1,2,3]. 
forEach )。 











12 .1 Array.prototype. sort 





V8 之 前 (ES10 之 前 ) 的 实现 对 包含 10 个 元 素 以 上 的 数组 使 用 了 一 种 不 稳定 的 快速 排序 
算法 。 然 而 在 稳定 的 排序 算法 中 ， 两 个 键 相 等 的 对 象 在 排序 后 的 顺序 与 在 排序 前 的 顺序 相同 。 
现在 ， 情 形 已 经 发 生 改 变 ，ES10 提供 了 一 种 稳定 的 数组 排序 算法 。 


举例 来 说 ，fruit 数组 的 定义 如 代码 清单 12-1 所 示 。 
代码 清单 12-1 fruit 数组 


001|var fruit = [ 





002 { name: "Apple", count: 13 }, 
003 { name: "Pear", ee 2 
004 { name: "Banana", eount: 12 上 
005 TJ"mame SEEFawbeFEy eount: Li 
006 { name: "Cherry", count: 11 }, 
007 { name: "Blackberry", count: 10 }, 
008 { name: "Pineapple", count: 10 } 
有 人 国医 





下 面 执行 排序 ， 如 代码 清单 12-2 所 示 。 


代码 清单 12-2 ”执行 排序 


001| // 创建 排序 阵 数 

002|Let my_sort = (a, b) => a.count - b.count; 
003 

004 | // 执行 稳定 的 ES10 排 序 


005| Let sorted = fruit.sort(my_sort); 
006 | console.log(sorted); 


控制 台 输出 如 图 12-1 所 示 。 





v (7) [fhs 人 


po: {name: "Blackberry", count: 16} 

p11: {name: "Pineapple", count: 16} 

p2: {name: "Strawberry”", count: 11} 

pp3: {name: "Cherry", count: 11} 

p4: {name: "Pear", count: 12} 

p5: {name: "Banana", count: 12} 

p6: {name: "Apple", count: 13} 
length: 7 

> _proto : Array(6) 


| 
图 12-1 ”排序 结果 


12.2 Array.forEach 





forEach 方法 会 针对 数组 中 的 每 一 项 执行 函 
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郊 数 。 每 次 欠 代 都 接受 3 个 参数 : value、index 


和 object。 这 类 似 于 for 循环 ， 但 看 起 来 更 整洁 ， 如 代码 清单 12-3 所 示 。 


代码 清单 12-3 ”forEach 方法 示例 


001| let fruit = [7 pear '， 

002 'banana', 

003 ‘'orange', 

004 OppLe ， 

005 PLneappLe ]; 
006 


007| Let print = 
008 console.log(item); 
009| } 

O010 

qn trunt oreEach( prunt 


从 ES6 开始 ， 建 议 将 箭 : 
更 多 于 阅读 和 维护 。 我 们 来 看 一 下 如 何 使 语法 更 整洁 。 

由 于 在 JavaScript 中 函数 也 是 表达 式 ， 因 此 可 以 直接 将 函 
单 12-4 所 示 。 


TunmectIonmentemaTnogexsgobect) 


疯 数 与 数组 方法 一 起 使 用 。 这 样 ， 在 构建 大 型 应 用 程序 时 ， 代 码 


数 传 给 forEach 方法 ， 如 代码 清 
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代码 清单 12-4 直接 将 因数 传 给 forEach 方法 

fruit.forEach(function(item, index, object) { 
console.log(item, index, object); 

1 

在 这 里 ， 你 或 许 想 使 用 入 头 子 数 () => 位 ， 如 代码 清单 12-5 所 示 。 


代码 清单 12-5 ”使 用 箭头 函数 


Yo 
002 
003 








001| fruit.forEach((item, index, object) => { 
002 console.log(item, index, object); 
oo: 





以 上 两 个 示例 的 输出 均 如 图 12-2 所 示 。 


"pear", 0, (5)["pear","banana","orange","apple","p...] 
"banana", 1, (5)["pear","banana","orange","apple","p...]| 
"orange'" ， 2, (5)["pear","banana",'"orange","apple","p...] 
"apple", 3, (5)["pear","banana","orange","apple","p...| 
"pineapple", 4, (5)["pear","banana","orange","apple","p...] 


图 12-2 遍历 结 
如 采 只 处 理 一 个 参数 并 返回 语句 ， 则 可 以 采用 代码 清单 12-6 中 的 这 种 简短 形式 。 如 琳 只 有 
一 条 语句 ， 束 可 以 移 除 大 括号 。 
代码 清单 12-6 ”简短 形式 
001| fruit.forEach(item => console. log(item)); 


图 12-3 展示 了 输出 的 遍历 结 


"pear" 
"banana" 
"orange" 
"apple" 
"pineapple" 


图 12-3 ”遍历 结 
12.3 Array.every 
返回 值 : 布尔 值 。 


请 不 要 将 every 与 forEach 相 混 消 。forEach 的 逻辑 是 “针对 每 项 执行 ”。 在 许多 情况 下 ， 如 
果 至 少 存在 一 项 的 求 值 结果 不 符合 指定 条 件 ， 那 么 实际 上 就 不 会 对 数组 中 的 每 项 执行 every 方法 。 
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如 果 数 组 中 每 项 的 值 都 满足 函数 参数 中 指定 的 条 件 ， 那 么 every 方法 将 返回 true， 如 代码 42 
请 昔 A 


代码 清单 12-7 返回 true 的 every 方法 


Qol|.1et WUmBer 和 
ta | Lat result = numbers.every (value => value < 10 ); 
03| results /7 true 


之 所 以 结果 为 true， 是 因为 数组 中 的 所 有 数字 避 小 于 10。 我 们 使 用 为 外 一 个 值 集 来 执行 同 
一 个 方法 。 如 果 数 组 中 存在 10 或 更 大 的 数字 ， 则 绪 末 为 false， 如 代码 清单 12-8 所 示 。 


代码 清单 12-8 ”返回 false 的 every 方法 


QO0L| let WUumBerd 二 [Qi200 7 374 07 不 儿 汉 
002 ,let result = numbers.every (value => Value < 10 ); 
003| result; // false 


其 中 一 个 数字 是 256。 这 意味 着 “并 不 是 数组 中 的 每 个 值 都 小 于 10”。 因 此 ,返回 false。 
需要 注意 的 是 ， 一 日 every 方法 遇 到 256， 将 不 再 检查 剩余 的 项 。 只 要 一 个 测试 失败 ， 就 会 返 
回 false。every 方法 并 不 会 修改 原始 的 数组 。 方 法 中 的 值 是 副本 ， 并 不 是 原始 数组 中 的 值 的 
引用 ， 请 看 代码 清单 12-9。 


代码 清单 12-9 ”every 方法 不 会 修改 原始 的 数组 


go0LUliet numbers = I Zo0070 4 5 G07: 

002| let result = numbers.every (value => Value++ < 10 ) :; 
003 

004|console.log(result); // false 

005| console.log (numbers); // 原始 数组 无 变化 














12.4 Array.some 
返回 值 : 布尔 值 。 


some 方法 与 every 方法 类 似 ， 不 过 是 在 遇 到 求 值 结果 为 true 的 值 时 停止 循环 。 代 码 清 
单 12-10 对 比 了 两 个 方法 。 


代码 清单 12-10 ”对 比 some 方法 和 every 方法 


O01iltlet numbers = [0, 10, 2 3 1 5 6 .13 

002| let condition = value => value < 10; // 值 小 于 10 
003| let some = numbers.some(condition); // true 

004| let every = numbers.every(condition); // false 
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在 这 里 ，some 方法 返回 true， 这 是 因为 它 检 查 到 第 一 个 值 0 小 于 10， 就 会 立即 返回 
true， 而 不 再 检查 其 余 的 值 。 对 于 该 数据 集 ，every 方法 返回 false， 这 是 因为 当 它 到 达 值 为 
10 的 第 二 项 时 ,“ 小 于 10” 的 测试 失败 。 


注意 : 不 要 认为 some 和 every 的 作用 相反 。 在 某 些 情况 下 ， 对 于 同一 个 数据 集 ， 它 们 会 返回 
相同 的 结果 。 


12.5 Array.filter 
返回 值 : 仅 由 符合 条 件 的 项 组 成 的 新 数组 。 
来 看 一 个 例子 ， 如 代码 清单 12-11 所 示 。 


代码 清单 12-11 filter 方法 示例 


O01 Let numbers = [人 [6102 34 5 5657: 

002| let condition = value => value < 10; 

003| let filtered = numbers.filter(condit1ion); 
004| console.log(filtered); // [0,2,3,4,5,6,7] 
005| console.log(numbers); // 原始 数组 无 变化 


过 滤 后 的 新 数组 包含 除 10 之 外 的 所 有 原始 项 ， 这 是 因为 10 未 通过 “小 于 10” 的 测试 。 在 
实际 应 用 中 ， 条 件 可 能 会 更 复杂 ， 人 处 理 的 对 象 集 也 会 更 大 。 





12.6 Array.map 





返回 值 : 对 原始 数组 中 的 值 进行 修改 〈 如 末 修 改 的 话 ) 后 的 副本 。 
来 看 一 个 例子 ， 如 代码 清单 12-12 所 示 。 


代码 清单 12-12 map 方法 示例 


oolltec numbers = IO L256.3.4.5 0 7); 

002 

003 | Let result = numbers.map(value => value = value + 1 ); 
O004 

gosleonsole tos(tresgole AI 2 257 4 .5 G0 708] 

006| console.log(numbers); // 原始 数组 无 变化 





nap 方法 与 forEach 方法 类 似 ， 但 它 返 回 修改 后 的 数组 的 副本 。 请 注意 ， 原 始 数组 仍然 保 
持 不 变 。 
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12.7 Array.reduce 
返回 值 ， 时 加 磊 。 


reduce 既 与 其 他 方法 相似 ， 又 是 与 众 不 同 的 ， 因 为 它 拥有 一 个 昧 加 带 的 值 。 昧 加 带 的 值 必 
须 进 行 初 始 化 。reduce 分 为 多 种 类 型 。 我 们 先 看 一 个 简单 的 例子 ， 如 代码 清单 12-13 所 示 。 


代码 清单 12-13 ”reduce 方法 示例 


O01l|lconst numbers = [ls 2Z: 4]3 
002| const R = (acc, currentValue) => acc + currentValue; 
003 ,console.log (numbers.reduce (R)); // 7 


随 着 值 的 迭代 ， 累 加 旧 将 所 有 的 数字 相 加 为 一 个 值 。 与 处 理 迭 代 的 其 他 数组 方法 一 样 ， 
reduce 可 以 访问 当前 正在 迭代 的 值 ( currentValue )。reduce 将 所 有 的 数字 相 加 为 一 个 累加 
大 的 值 ， 并 返回 1 + 2+4=7。 


如 何在 更 复杂 的 实际 情况 下 理解 reduce 呢 ?” 当 实际 开发 软件 时 ， 你 并 不 会 使 用 reduce 来 
计数 。 这 可 以 通过 一 个 简单 的 for 循环 来 实现 。 你 遇 到 的 大 多 数 情况 是 一 组 数据 需要 被 “ 归 约 ” 
为 基于 某 种 标准 的 重要 值 。 





12.7.1 Array.reduce 与 Array.filter 


数组 对 象 拥有 许多 方法 ,它们 乍 一 看 似乎 执行 同样 的 操作 ， 这 是 有 绿 由 的 。 在 面 对 数 组 方 
法 时 ， 一 定 要 为 任务 选择 一 个 合适 的 工具 。 不 要 仅仅 因为 想 使 用 reduce 而 使 用 它 ， 要 和 弄 消 楚 
征 否 存在 更 高 效 的 方法 。 


有 人 说 reduce 是 filter 和 map 之 父 。 需 要 使 用 filter 和 map 的 操作 都 可 以 使 用 reduce 
来 完成 。 不 过 ，reduce 提供 了 一 种 比 for 循环 或 其 他 数组 方法 更 巧妙 的 解决 方案 ,来 对 数字 求 和 。 

















12.7.2 ”更 新 数据 库 中 的 对 象 属性 


在 执行 更 新 或 删除 等 API 操作 之 后 ， 你 也 许 想 更 新 应 用 程序 的 视图 。 使 用 reduce 方法 ， 
只 需 更 新 受 影响 的 对 象 属性 ， 而 不 必 更 新 所 有 的 对 和 象 属性 。 








12.7.3 ”reduce 的 实际 应 用 
1. 缩小 对 象 属性 的 范围 


假设 二 手 车 交易 应 用 程序 有 一 个 按钮 ， 可 以 更 新 特定 和 车辆 的 价格 。 用 户 设 置 新 的 价格 ， 并 
单 击 该 按钮 。 这 会 更 新 数据 库 中 的 车 辆 信息 。 然 后 ， 回 调 函 数 会 返回 一 个 对 象 ， 其 中 包含 该 后 
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辆 ID 对 应 的 所 有 属性 〈 如 价格 、 品 牌 、 型 号 和 年 份 ) 但 是 只 需要 更 新 价格 。 


reduce 能 够 确保 将 犯 围 绑 小 为 车辆 的 价格 属性 ， 而 不 是 对 旬 的 整个 属性 集 。 之 后 ， 该 对 旬 
将 被 发 送 回 数据 库 ， 并 且 应 用 程序 的 视图 将 得 到 更 新 。 


2. 计算 周末 个 数 





假设 需要 实现 这 样 一 个 函数 : 根据 给 定 的 月 份 ， 返 回 该 月 份 中 的 周末 个 数 以 及 工作 日 和 法 
定 假期 的 天 数 。 


重要 的 是 ,要 保持 输入 值 与 reduce 返回 值 的 类 型 相同 。reduce 的 一 大 特点 是 归 约 集合 (不 
一 定 是 通过 过 滤 ， 但 也 可 以 实现 )。 


通 
3. 函数 的 纯粹 性 





遵循 函数 式 编程 原则 的 代码 经 常会 使 用 reduce， 函 数 的 纯粹 性 就 是 其 中 的 一 个 原则 。 接 下 
来 的 注 蕊 事项 将 介绍 纯 函 数 的 一 些 特性 。 








12.7.4 注意 事项 
尽管 并 非 必 须 避 循 本 市 所 述 思 想 ， 但 它们 能 够 帮助 你 避免 编写 反 模 式 的 代码 。 


仪 当 结 果 与 数组 元 又 具有 相同 类 型 且 与 reduce 相关 时 , 才 使 用 reduce， 如 代码 清单 12-14 
所 示 。 


代码 清单 12-14 ”数值 数组 被 “ 归 约 ” 为 同一 类 型 的 数值 
001| [1,2,3,4,5] .reduce((a, b) => a + b, 0); 











以 下 是 其 他 注意 事项 。 


口 请 使 用 它 来 求 和 。 

口 请 使 用 它 来 计算 乘积 。 

口 请 使 用 它 来 更 新 React 中 的 状态 。 

口 请 勿 使 用 它 从 头 开 始 构 建新 的 列表 或 对 象 。 

口 请 勿 使 用 它 来 转换 参数 ( 或 修改 参数 的 值 )。 

口 请 勿 使 用 它 来 执行 额外 操作 ， 如 API 调用 、 路 由 转换 。 

口 请 勿 使 用 它 来 调用 非 纯 函数 ， 如 Date.now、Math. random。 





12.8 Array.f lat 
代码 清单 12-15 展示 了 如 何 扁 平 化 多 维 数 组 。 
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代码 清单 12-15 ”局 平 化 多 维 数 组 12 








TT 

002| mult1,. Tlatt():; // [1,2,3,4,5,6,Array(4)] 

Do 由 mu ahead Fiat(): A A 

004| multi.flat().flat().flat();// [1,2,3,4,5,6,7,8,9,10,11,12] 

| Po ee oo Ph We ey 
12.9 Array.flatMap 

请 看 代码 清单 12-16。 
代码 清单 12-16 ”创建 多 维 数 组 

OO0LLet oarray = [Ll 2. SS， 

002 array.map(x => [x, x * 2]); 

数组 变 为 图 12-4 中 这 样 。 

*6: (2) [1, 2] 

b 1 (2) [2, #4] 

= 28 (2) [3, €1 

pS (2 TV1 

* 4: (2) [5，16] 

length: 5 
图 12-4 创建 的 多 维 数组 

现在 虱 平 化 数组 ， 如 代码 清单 12-17 所 示 。 
代码 清单 12-17 ”扁平 化 多 维 数组 

OU0TISrrave TlatMap(v > lv VS 2 ， 

结果 如 图 12-5 所 示 。 

>» [1，2，2，4，3，6，4，8，5，10] 

图 12-5 ”局 平 化 后 的 结果 

12.10 String.prototype.matchAll\ 





在 编写 软件 时 ， 如 何在 字符 串 中 匹配 多 种 模式 是 一 个 很 常见 的 问题 。 用 例 包 括 从 电子 邮件 头 
提取 名 字 和 邮箱 地 址 、 扫 描 是 否 存 在 特有 模式 等 。 过 去 ， 为 了 匹配 多 项 ， 我 们 结合 使 用 string. 
match 与 正则 表达 式 和 全 局 匹配 符 /g9， 或 者 使 用 融 /g 的 RegExp .exec 或 RegExp. test。 
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我 们 先 来 看 一 下 旧 规 范 的 原理 。 计 字符 串 参 数 的 string.match 仅 返 回 第 一 个 匹配 项 ， 如 
代码 清单 12-18 所 示 。 





代码 清单 12-18 string,match 示例 


Qo 
002 
003 


let string = "Hello"; 
Let matches = string.match("L"),; 
console. Loz (matches[o0l): /7 





结果 是 一 个 字母 "UL" ( 注意 ， 匹 配 结果 存储 在 matches[0] 中 ， 而 不 是 matches 中 )。 


在 "hello" 中 搜索 "Lt"， 仪 返回 一 个 "tL"。 使 用 币 正 则 表达 式 参 数 的 string.match 也 是 
如 此 。 我 们 使 用 正则 表达 式 /LV 来 定位 字符 串 "hetLto" 中 的 "4"， 如 代码 清单 12-19 所 示 。 


代码 清单 12-19 ”使 用 正则 表达 式 也 仅 返回 一 个 "1 


QL 
002 
号 








Let string = "Hello"; 
let matches = string.match(/L/); 
console.log(matches[0]); // "LL" 





12.10.1 使 用 全 局 匹配 符 /g 


如 代码 清单 12-20 所 示 ， 带 正则 表达 式 和 全 局 匹配 符 /g 的 string.match 会 返回 多 个 匹 
配 项 。 


代码 清单 12-20 ”使 用 全 局 匹配 符 /g 


001| Let string = "Hello"; 
002| Let ret = string.match(/l/g); // (2) ["L"，"L"] 


太 棒 了 ! 我 们 没有 使 用 ES10 的 新 特性 就 得 到 了 多 个 匹配 项 。 既 然 如 此 ， 为 什么 还 要 使 用 全 
新 的 matchAll 方法 呢 ? 在 详细 回答 该 问题 之 前 ， 先 来 看 一 下 捕获 组 。 别 的 不 说 ,我们 起 码 能 
够 从 中 学 到 一 些 关 于 正则 表达 式 的 新 内 容 。 








12.10.2 ”正则 表达 式 的 捕获 组 


正则 表达 式 中 的 捕获 组 就 是 从 括号 () 中 提取 模式 。 可 以 使 用 regex.exec( 字符 串 ) 和 
string,match 来 捕获 组 。 正 则 表达 式 的 捕获 组 是 通过 将 模式 包 囊 在 括号 中 创建 的 ,为 ( 模式 )。 
而 对 结果 对 象 创建 组 的 属性 则 是 (?< 名 称 > 模式 ) 。 要 创建 组 的 名 称 ， 就 在 括号 中 的 开头 设置 
?< 名 称 >。 绪 来 对象 就 会 添加 一 个 新 的 属性 groups. 名 称 。 


图 12-6 展示 了 我 们 要 匹配 的 字符 串 示 例 。 
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black*raven lime*parrot white*xseagull 





图 12-6 要 匹配 的 字符 串 示例 
代码 示例 如 代码 清单 12-21 所 示 。 


代码 清单 12-21 match.groups.color 和 match.groups.bird 是 通过 在 正则 表达 式 字 符 串 
的 括号 中 添加 ?<color> 和 ?<bird> 创建 的 


001| const string = "blLackxraven limexparrot whitexseagull'; 
002| const regex = /(?<color>.*x?)\*(?<bird>[a-z0-9]+)/g; 

003| while (match = regex.exec(string)) 

004| I 

005 Let value = match[0]; 

006 let index = match.1index; 

007 Let 1Tnput = match.1input; 

008 console.log( S${value} at ${index} with '${input}' ) 
009 console. Loz(match.eroups: color); 

010 console.log(match.groups.bird); 

OT 





regex.exec 方法 需要 调用 多 次 ， 才 能 遍历 整个 搜索 结果 集 。 在 每 次 迭代 中 调用 该 方法 时 ， 
都 会 显示 下 一 个 结果 (exec 不 会 同时 返回 所 有 的 匹配 项 )。 因 此 ， 这 里 使 用 了 while 循环 。 


控制 台 输 出 如 图 12-7 所 示 。 











black*raven at 6 with ‘black*raven lime*parrot white*seagull' 
black 

raven 

lime*parrot at 11 with ‘black*raven lime*parrot white*seagull' 
lime 

parrot 

white*seagull at 23 with 'black*raven lime*parrot white*seagull' 
white 


seagull 
> | 


图 12-7 控制 台 输 出 
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JavaScript 有 一 个 怪 疾 。 如 果 删 除 该 正则 表达 式 中 的 /g， 那 么 第 一 个 结果 将 无 限 循环 。 这 
在 过 去 是 非常 痛苦 的 。 假 设 你 从 某 个 数据 库 接收 正则 表达 式 ， 但 并 不 确定 它 的 未 尾 有 /g， 这 就 
需要 编写 额外 的 代码 来 检查 。 




















12.10.3 ”使 用 matchAll 的 理由 
我 们 有 充分 的 理由 使 用 matchALL 方法 ， 以 下 列举 一 些 理由 和 注意 事项 。 














口 当 与 捕获 组 一 起 使 用 时 ， 代 码 会 更 整洁 。 在 正则 表达 式 中 ， 捕 获 组 是 带 括号 的 部 分 ， 用 
来 提取 模式 。 

口 它 返 回 迭 代 器 ， 而 不 是 数组 。 送 代 咒 本 身 是 非常 有 用 的 。 

口 迭代 恬 可 以 由 展开 运算 符 (... ) 转换 为 数组 。 

口 不 必 再 使 用 带 /g 的 正则 表达 式 。 当 从 数据 库 或 外 部 数据 源 中 获取 未 知 的 正则 表达 式 ， 
并 与 旧 的 RegEx 对 象 一 起 使 用 时 ， 这 非常 有 用 。 

口 使 用 RegEx 对 象 创建 的 正则 表达 式 不 可 以 使 用 点 运算 符 (. ) 来 连接 。 

口 RegEx 对 象 会 改变 内 部 的 LastIndex 属性 ， 该 属性 用 来 跟踪 上 次 匹配 的 位 置 。 这 可 能 会 
在 复杂 的 情况 下 引发 问题 。 











12.10.4 matchAll 的 工作 方式 


我 们 来 匹配 单词 hello 中 的 e 和 1。 由 于 返回 的 是 迭代 侣 ， 因 此 可 以 使 用 for.. .of 循环 来 
遍历 它 ， 如 代码 清单 12-22 所 示 。 


代码 清单 12-22 ”匹配 ee 和 1 


001| // 匹配 出 现 的 所 有 e 和 1 

002| let iterator = "hello".matchAll(/l[el]/); 
O03 Tor (const matcn of Tterator) 

004 console. log(match); 





请 注意 ，matchALL 方法 并 不 需要 全 局 匹配 符 /g。 匹 配 结果 如 代码 清单 12-23 所 示 。 
代码 清单 12-23 ”匹配 结 

gon er sndex Ll not unhelo ly wx 公 1 

002| [ '1',，iindex: 2，input: 'hello' ] // 迭代 ?2 

O03 LOex So Tnput euLo T/A 3 
12.10.5 ”使 用 matchAll 的 捕获 组 示例 


如 前 所 述 ， 由 于 matchALL 返回 的 是 迭代 侣 ， 因 此 可 以 使 用 for.. .of 循环 来 遍历 它 。 来 看 
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一 个 示例 ， 如 代码 清单 12-24 所 示 。 
代码 清单 12-24 使 用 for.. .of 循环 遍历 


const string = 'black*xraven Limexparrot whitexseagull',; 
const regexX = seeer2w JW <oTrdLasz6=911 
















let value = match[0]; 
Let index = match.index ; 


QDs 

006 Let iinput = match.1input; 

007 consoLe .Log( S${value} at S${index} with '$s{input}' ); 
008 console.log(match.groups.color); 


console.log(match.groups.bird); 


控制 台 输 出 如 图 12-8 所 示 。 





black*raven at 6 with ‘black*raven lime*parrot white*seagull' 
black 
raven 
lime*parrot at 11 with ‘black*raven lime*parrot white*seagull' 
lime 
parrot 
white*seagull at 23 with ‘black*raven lime*parrot white*seagull' 
white 
seagull 

> | 


图 12-8 ”控制 台 输 出 








这 也 许 看 起 来 与 regex.exec 的 while 御 环 非 第 相似 ,但 基于 前 述 理由 ， 这 是 更 好 的 实现 
方式 。 此 外 ， 由 于 移 除 了 /9， 因 此 它 不 会 造成 无 限 循环 。 


12.10.6 ”注意 事项 


请 使 用 string.matchALL， 而 不 是 带 全 局 匹配 符 /g 的 regex.exec 和 string.match。 


12.11 比较 两 个 对 象 


比较 两 个 数 宇 字面 量 (如 1===1 ) 或 布尔 型 字面 量 ( 如 true===false ) 是 有 意义 的 ， 而 
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比较 两 个 对 象 是 什么 含义 呢 ? == 运算 符 和 === 运算 符 无 法 用 来 比较 对 象 ， 这 是 因为 它们 是 按 引 
用 而 不 是 按 值 进行 比较 的 。 以 代码 清单 12-25 为 例 ，[] 和 [] 按 值 比较 可 能 会 相等 ， 但 它们 是 
不 同 的 数组 。 

代码 清单 12-25 ”比较 两 个 空 数组 


001| [] == Ws // 按 值 比 较 的 结果 为 false 
002 let x = []; x === x; // 仅 按 引用 比较 的 结果 为 true 





为 了 比较 两 个 对 象 ， 我们 必须 目 己 编写 函数 ! 对 和 象 的 一 种 比较 方式 是 ， 比 较 它 们 所 有 属性 
的 个 数 、 类 型 和 值 。 


strcmp 是 在 许多 编程 语言 中 常见 的 字符 串 比 较 也 数 。 遵 循 该 函数 的 命名 规范 ， 我 们 编写 自 
定义 函数 objcmp， 来 比较 两 个 对 象 ， 如 代码 清单 12-26 所 示 。 
代码 清单 12-26 ” 浅 复制 对 象 的 属性 比较 算法 


001|// 比较 对 象 ， 如 果 所 有 属性 都 相等 ， 则 返回 true 
002|export default function objcmp(a, b) { 











003 

004 // 将 属性 复制 到 A 和 B 中 

005 let A = Object.getOwnPropertyNames (a); 
006 let B = Object.getownPropertyNames(b ) ; 
OO7 

008 // 如 果 属 性 个 数 不 相等 ， 则 提前 返回 

009 if (A.length != B. length) 

010 return false; 

@l 

012 // 遍历 并 比较 两 个 对 象 的 所 有 属性 

> for (Let 1 = ©0; i1 < A.length; i++) { 
014 Let propName = A[T]; 

四 三 

016 // 属性 的 值 和 类 型 必须 相等 

OUT if (aLpropName] !== bLpropName] ) 
018 return false; 

019 小 

020 

So // 对 象 相 等 

9022 return true; 

sel 


objcmp 函数 有 两 个 参数 a 和 bb， 表示 要 比较 的 两 个 对 象 。 这 是 一 种 非 递 归 的 浅 复 制 算法 。 
换 句 话说 ， 我 们 只 比较 直接 附属 于 对 和 象 的 第 一 类 属性 ， 并 不 比较 属性 的 属性 。 在 大 多 数 情况 下 ， 
这 样 做 就 可 以 了 。 
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不 过 ， 这 里 存在 一 个 大 问题 。 在 目前 的 形式 下 ,该 函数 的 属性 不 可 以 指 问 数 组 或 对 象 。 这 
两 种 常见 的 数据 结构 很 可 能 就 是 某 个 对 象 的 一 部 分 。 即 使 不 进行 深度 比较 ， 只 要 某 个 属性 指 癌 
对 象 或 数组 ， 不 管 两 个 对 象 的 属性 个 数 和 实际 值 是 否 相 同 ， 困 数 也 都 会 返回 false， 如 代码 清 
单 12-27 所 示 。 


代码 清单 12-27 ”在 这 种 情况 下 ，obj cmp 果 数 返回 false 


001|// 创建 两 个 相同 的 对 象 

002|Let a = { prop: [1,2], obj: {} }; 
o03|llet'ib = { prop:; [1,2|], obj: {} }; 
004 

005|objcmp(a，b); // false 




















我 们 的 算法 无 法 正确 执行 [1,2] === [1,2]。 该 如 何 处 理 这 种 情况 呢 ? 可 以 编写 一 个 is_ 
array 函数 。 由 于 数组 是 JavaScript 中 唯一 拥有 Length 属性 的 对 象 ， 且 至 少 拥有 3 个 高 阶 函数 
(filter、reduce 和 map )， 因 此 ， 如 果 对 象 中 存在 这 些 方法 ， 就 可 以 基本 确定 它 是 数组 ， 如 代 
码 清单 12-28 所 示 。 


代码 清单 12-28 is array 函数 








001| function 1s_array(value) { 

002 return typeof value.reduce == "function'" && 
003 typeof value.filter == "function" && 
004 typeof value.map == "function" &e& 
005 typeof value.length == "number"; 

006 } 

O007 

008 |// 测试 函数 

009UConsoUew Log(ns array(1)), // false 
010 console.log(is_array("string")); // false 
Olleonsole log(s array(la Ly)), // false 
012 console.log(is_array(true)); // false 
gl> leonseoles los(s arrayoll)y), // true 

014 console.log(is_array([1,2,3,4,5])); // true 


12.11.1 编写 arrcmp 


假定 数组 相等 是 指 两 个 数组 的 每 个 对 应 位 置 上 的 值 都 匹配 。 在 这 个 前 提 下 ， 我 们 来 编写 
arrcmp 也 数 ， 如 代码 清单 12-29 所 示 。 
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代码 清单 12-29 arrcmp 隆 数 


vol Let a = [2 

002| let b = [1,2|]; 

oo letleo = | 55] 

O004 

Qos function arremp(a, b) { 
006 


DO 

008 1f (!(1is_array(a) && 1s_array(b))) 
009 return false; 

O10 

O11 // 长 度 不 相等 

O12 if (a.length != b.Length) 

013 return false; 

O014 

015 // 按 值 比较 

016 for (let 1 = 0; 1 < a.length; 1++) 


Ol if (a[li] !== b[i]) 

018 return false; 

019 

020 // 所 有 测试 都 通过: 数组 a 和 b 相 等 
四 2 return 七 rue ; 

22|1 下 

025 


024| console.log(arrcmp(a,b)); // true 
025| console. log(arremp(b by) // trye 
026| console.log(arrcmp(b,c)); // false 


JavaScript 并 没有 比较 数组 的 内 置 国 数 ， 这 是 有 理由 的 。 数 据 映 射 到 数组 的 方式 在 很 大 程度 
上 取决 于 应 用 程序 对 数据 的 整体 设计 方式 。 毕 葛 ， 两 个 数组 相等 完 葛 意味 春 什么 呢 ? 项 目 不 同 ， 
数据 布局 就 不 同 ， 将 数据 存储 在 数组 中 的 目的 也 会 不 同 。 因 此 ， 并 不 能 总 保证 数组 的 完整 性 。 


由 于 本 书 没有 涉及 具体 的 项 目 ， 因 此 我 们 只 能 做 上 述 假设 。 


























12.11.2 ”改进 objcmp 


既然 有 了 is_array 图 数 和 arrcmp 吗 数 ， 我 们 就 癌 objcmp 困 数 中 添加 两 种 特殊 情况 的 比 
较 代 码 : 一 种 是 使 用 新 的 晒 数 来 比较 数组 ， 另 一 种 是 使 用 递归 来 比较 对 象 。 这 样 做 将 改善 算法 ， 
使 其 不 易 出 错 。 


如 果 对 象 的 一 个 属性 本 身 确定 是 对 象 字 面 量 ， 那 么 obj cmp 将 调用 自己 ， 如 代码 清单 12-30 
中 的 第 25 行 所 示 。 








12,11 
代码 清单 12-30 ”完善 obj cmp 负数 
001| // 比较 对 象 ， 如 果 所 有 属性 都 相等 ， 则 返回 true 
002 | function objcmp(a, b) { 
OS 
004 // 将 属性 复制 到 A 和 B 中 
O05 let A = Object.getOwnPropertyNames (a); 
006 let B = Object.getOwnPropertyNames(b); 
UO 
008 // 如 果 属 性 个 数 不 相 等 ， 则 提前 返回 
009 if (A.length != B. length) 
010 return false; 
Gll 
012 // 遍历 并 比较 两 个 对 象 的 所 有 属性 
013 for (let 1 = 0; 1 < A.length; i++) { 
014 let propName = ALT]; 
四 5 Let pl = a[propNamej]; 
O16 let p2 = blpropName|]; 
017 // 属性 指向 数组 
018 TFs arrav(pLl)y Ls array(p2)0 
019 i (arremp(pl p22)) 
020 return false; 
D2al } else 
02。 // 属性 指向 对 象 
Do if (pl.constructor === Object && 
024 p2.constructor === Object) { 
2 Tr Cloblem(pL D2 
[oe return false; 
027 // 按 原 始 值 进行 比较 
028 } else if (pl !== p2) 
029 return false; 
030 } 
Del return 七 rue ; 
032 | } 








本 例 高 完 显 示 与 前 面 版 本 不 同 的 代码 行 ， 其 中 次 加 了 属性 是 指 回 数 组 还 是 指 癌 对 象 的 测试 。 


如 打 属 性 既 不 指 回 数 组 也 不 指 回 对 象 ， 则 正 稼 比较 原始 值 。 


12.11.3 ”针对 更 复杂 的 对 象 测 试 obj cmp 
我 们 来 试 一 试 ! 请 看 代码 清单 12-31。 


比较 两 个 对 象 


117 
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代码 清单 12-31 3 个 对 象 
001|LetM = { let N= { Let O = { 
002 站 站 ai 
003 b: 1L00n， b: 100n ， De O00 
004 EC Cy 4141, Ge 
005 0 加 a a 
006 e: Rs ee: ale ee: "De 
007 下 EU f: true, f: true, 
008 BE: 区) > + By 《) 三 > 二 pg: () => 4} 
ooo 1 上 
这 里 有 3 个 对 象 M_、N 和 0。M 和 N 是 一 样 的 ， 而 0 只 有 数组 值 [5,7] 与 前 两 者 有 所 不 同 。 
针对 这 3 个 对 象 应 用 obj cmp 函数 ， 绪 有 末 如 代码 清单 12-32 所 示 。 
代码 清单 12-32 ”针对 3 个 对 象 应 用 objcmp 函数 
00Diiop]ecmouUM aaM)， // true 
002 objcmp(M, N); // true 
DOODTem MoO). // false 
针对 如 代码 清单 12-33 所 示 的 情形 ， 旧 版 本 的 objcmp 返回 的 是 false。 不 过 ， 改 进 后 的 隔 
数 可 以 正常 工作 了 。 
代码 清单 12-33 ”终于 返回 true 
001|// 创建 两 个 相同 的 对 象 
002| let a = { prop: [1,2], obj: {} }; 
oe 
O004 
O05lobDjemp(a oI// true 








再 使 用 不 同 的 对 象 字面 量 来 进行 测试 ， 如 代码 清单 12-34 所 示 。 
代码 清单 12-34 ”使 用 对 象 字面 量 测试 











004|.0bjcmp({a:[1,2]}, {a:[1,2]}); // true 
oo0slobem GCap Ll lalbe Li /AAAErue 
006 objcmp({a:[1,2]}, {a:[1,3]}); // false 
O07lobTcm (Gta (DL ta lb 2 /Afalse 
对 和 象 比 较 子 数 现在 可 以 按 预 期 工作 了 了。 虽然 人 并 不 完美 ， 但 至 少 在 大 多 数 情况 下 不 会 出 问 


题 了 。 实 际 上 ， 它 甚至 可 以 递归 检查 对 象 属性 
你 可 以 进一步 改进 该 函数 ， 


如 上 所 示 ， 这 正 是 深度 搜索 的 局 部 孙 


可 改进 


Zu 





这 比 之 前 的 搜索 更 深入 了 一 些 。 
检查 对 和 象 数 组 ， 而 不 仅仅 检查 数值 数组 。 
数 不 存 在 的 原因 。 它 实际 上 取决 于 你 的 数据 实现 。 谁 
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能 保证 数组 就 包含 对 象 ， 或 菏 个 对 象 属性 丈 指 向 妨 一 个 对 象 呢 ?如果 没 有 这 些 知识 ,我 们 很 难 
创建 一 个 通用 而 又 不 存在 反 模 式 风 险 的 算法 。 





12.11.4 objcmp 小 结 








在 解决 “比较 两 个 对 象 ” 这 个 问题 时 ,我 们 发 现 了 男 一 个 需要 先 解 决 的 问题 (比较 两 个 数组 )。 
这 是 我 们 在 考虑 编写 obj cmp 时 未 预料 到 的 。 既 然 JavaScript 已 经 提供 了 Array.isArray 方法 ， 
那么 为 什么 我 们 还 要 多 此 一 举 呢 ? 


能 否 主动 解决 问题 ， 是 区 分 普通 程序 员 和 优秀 程序 员 的 关键 。 目 己 思 考 解决 问题 的 技巧 ， 
而 不 是 使 用 现 有 的 库 ， 有 助 于 目 我 提高 。 目 己 编写 代码 总 是 一 个 好 主意 。 如 采 不 能 目 己 编写 
is_array 国 数 ， 那 么 今后 在 面临 更 为 复杂 的 问题 时 ， 你 的 实践 经 验 将 不 足以 文 持 你 编写 重要 的 
了 数 ， 而 这 样 的 函数 往往 是 项 目 成 功 的 关键 。 编 写 这 样 的 函数 不 仅 会 让 你 在 同龄 人 中 声名 硕 起 ， 
而 且 也 会 让 你 的 工作 成 果 本 号 受 人 瞩目 。 大 多 数 软 件 公 司 在 面试 环 市 不 仅 会 测试 求职 者 的 知识 
水 平 ， 而 且 还 会 了 解 他 们 解决 问题 的 方法 。 因 此 ， 日 己 编 写 消 数 是 个 好 主意 ! 















































13.1 函数 


JavaScript 中 存在 两 种 函数 : 使 用 function 关键 字 定 义 的 常规 函数 和 ES6 增加 的 箭头 函数 
() => {}。 


常规 函数 可 以 被 调用 ， 也 可 以 作为 对 象 的 构造 函数 ， 与 new 运算 符 一 起 使 用 ,创建 对 象 
的 实例 。 请 注意 ， 在 ES6 之 后 ， 你 也 可 以 使 用 class 关键 字 来 实现 同样 的 操作 。 在 函数 内 部 ， 
this 关键 学 可 以 指向 调用 该 阴 数 的 语 境 。 如 果 该 遇 数 用 作对 象 的 构造 孙 数 ， 那 么 它 还 可 以 指 问 
创建 的 对 和 象 实例 。 函 数 的 作用 域 中 存在 一 个 类 数组 的 arguments 对 象 ， 它 持 有 参数 的 长 度 和 传 
递 给 函数 的 值 ， 即 使 是 函数 定义 中 并 不 存在 的 参数 名 也 是 如 此 。 


箭头 函数 可 以 被 调用 ， 但 不 可 以 用 来 实例 化 对 象 。 箭 头 函 数 在 函数 式 编程 中 很 常 匈 。 与 常 
规 函 数 一 样 ， 箭 头 函 数 可 以 用 来 定义 对 象 方法 。 它 还 常 被 用 作 事 件 回 调 晒 数 。 在 箭头 函数 的 作 
用 域内 ，this 关键 字 指 向 this 表示 的 作用 域外 的 任意 内 容 。 箭 头 函 数 的 作用 域 中 并 不 存在 类 
数组 的 arguments 对 象 。 











13.1.1 函数 结构 


限 数 定义 包含 function 关键 字 、 紧 随 其 后 的 名 称 (如 图 13-1 中 的 update )、 包 围 参 数列 
表 的 插 写 ， 以 及 用 大 插 号 括 起 来 的 函数 体 。 


return 关键 字 不 是 必需 的 。 不 过 ， 即 使 未 指定 return 关键 字 ， 在 函数 体 中 的 所 有 语句 都 
执行 完 后 ， 国 数 仍 会 返回 。 

在 ES5 的 函数 中 ，this 关键 字 指 向 函 数 被 执行 的 语 境 。 它 通常 是 全 局 的 window 对 象 。 如 
果 函 数 使 用 new 关键 字 来 实例 化 对 象 ， 那 么 this 关键 字 将 指向 函数 实例 化 的 对 象 实例 。 

arguments 是 类 数组 的 对 象 ， 它 包含 传递 给 明 数 的 基于 零 索 引 的 参数 列表 ， 即 使 函数 的 定 
义 中 并 未 指定 参数 名 也 是 如 此 。 
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arguments 

名 称 [as [] {} 默认 参数 
function update (a,b,c,d = "hi") 参数 
{ a;7 

b; 日 

Cc; 器 

di shh 0 1 2 3 

arguments ; 类 数组 的 arguments 对 象 [TY [] 于 Fw] 

Cp 语 境 : window 或 对 象 实例 

return 七 rue ; 返回 值 


图 13-1 ”函数 结构 


13.1.2 ”匿名 函数 


匿名 也 数 (无 名 也 数 ) 可 以 使 用 同样 的 语法 进行 定义 ， 但 没有 上 郑 数 名 。 匿 名 困 数 通常 用 作 
事件 回调 ， 在 这 种 情况 下 ， 我 们 通常 不 需要 知道 国 数 的 名 称 ， 只 是 在 事件 完成 后 的 某 个 时 刻 执 
行 该 函数 。 请 看 图 13-2 和 图 13-3 中 的 示例 。 


SetT1imeout 上 (人 





，1000) ; 
图 13-2 用 作 setTimeout 事件 回调 的 匿名 函数 


document.addEventListener("click", 





图 13-3 ”用 于 捕获 鼠标 单 击 事 件 的 匿名 函数 
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13.1.3 将 函数 赋 给 变量 
可 以 将 匿名 函数 赋 给 变量 ， 使 其 成 为 有 名 函数 。 这 样 一 来 ， 就 可 以 将 函数 定义 与 其 在 基于 
事件 的 方法 中 的 使 用 分 开 。 请 看 图 13-4 和 图 13-5。 


let print = 





图 13-4 ”将 匿名 轴 数 赋 给 变量 print 


let clicked 





图 13-5 将 匿名 函数 赋 给 变量 clicked 


现在 可 以 通过 函数 名 来 调用 它们 ， 如 图 13-6 所 示 。 


// 调用 有 名 的 匿名 函数 
print(); 
clicked(); 

图 13-6” 赋 给 变量 名 的 “匿名 ”函数 变 成 了 有 名 函数 


还 可 以 仪 按 名 称 将 它们 传递 给 事件 函数 ， 如 图 13-7 所 示 。 


/i 更 整洁 的 代码 
setTimeout(print, 1000);) 
document.addEventListener("click", clicked ) ; 


图 13-7 更 整洁 的 代码 


这 通 第 会 让 代码 看 起 来 更 整洁 。 请 注意， 不 同 的 事件 函数 都 会 生成 日 己 的 参数 ,不管 匿名 
征 合 


国 数 是 否定 义 了 参数 来 捕获 它们 ， 它 们 都 会 被 传递 给 匿名 函数 ， 如 图 13-8 所 示 。 







let clicked = 


图 13-8 事件 函数 的 参数 被 传递 给 匿名 函数 





1. 函数 参数 
陋 数 参数 是 可 选 的 。 但 在 很 多 情况 下 ， 会 定义 一 


始 值 、 
清单 13-1。 


代码 清单 13-1 


Se 
> 
004 
Yos 
006 
OO 
008 
qo 
010 
Sed 
Ql2 


GT 


可 以 传 ; 


将 一 些 


O001 
002 


003 Eon "Text".. 


请 注意 
传递 给 Fun R 


化 
参 


， 我 们 将 函数 名 VoLLeybaLL 和 结果 Volleyball ( 求 值 结果 为 字符 串 值 "Volleyball") 
哨 数 的 最 后 两 个 参数 ， 探 制 台 输出 如 图 13-9 所 示 。 


Text 
125 
bp 03) LAs ols 3 


有 





困 数 参数 的 示例 


QoLl Tunction Fun(text, number array object, func, SE { 


// 输出 参数 的 值 
log(text); 
log(number); 
log(array); 
log(object); 


console. 
console. 
console. 
console. 


console 


console. 





.lLog(func); 


一 些 参 数 。 可 以 使 用 上 默认 的 函数 参数 将 原 
数组 和 对 和 象 等 传递 到 函数 中 。 任 何 求 值 结果 为 单个 值 的 函数 都 可 以 这 样 做 。 请 看 代码 














Log(misc) ; | 


// 通过 参数 名 来 调用 函数 


TOURCLUJ 


> {count: 1} 
££ VolLLeyball() {return 
Volleyball 
Volleyball 


> | 


125 ， 


一 个 函数 的 名 称 。 
数 传 递 给 果 数 的 参数 ， 
代码 清单 13-2 ”将 参数 传递 给 


function Volleyball() { return "Volleyball"; } 


咀 数 


这 样 束 可 以 在 为 一 个 函数 中 的 菏 人 处 调用 该 孙 数 。 


如 代码 清单 13-2 所 示 。 





"VoLLeyballL";} 








图 13-9 


控制 台 输 出 





Console, 


console 


CONSO Le. 


console 


console. 
console. 


CONSO Le,. 


L203 countLy VeolLevbalt VoltLtleyvbal LA 


log(text); 


. Log (number ) ; 


Lart Brray)s 


.log(object); 


Lomi FUME ， 
log(misc); 
ow 区 (人 })} 
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这 是 一 些 有 用 的 原始 值 和 对 和 象 。 


最 后 一 个 值 是 通过 调用 也 数 Volleyball 生成 的 ， 该 函数 被 传递 给 参数 func。 这 意味 着 我 
们 可 以 通过 调用 func 来 调用 它 ， 而 不 是 调用 Volleyball， 因 为 func 是 图 数 内 部 的 名 称 。 


2. 检查 类 型 


JavaScript 是 一 门 动态 类 型 语言 。 变 量 的 类 型 由 它 的 值 决 定 。 变 量 定 义 只 假定 类 型 ， 这 有 时 
会 引起 一 些小 错误 。 例 如 , 尽管 JavaScript 提供 了 许多 对 象 类 型 , 但 它 实 际 上 并 不 提供 自动 保护 ， 
此 不 能 确保 传递 给 函数 的 参数 是 你 所 预期 的 。 


在 前 面 的 示例 中 ， 如 有 果 我 们 将 数组 或 对 象 传递 给 func 参数 ， 会 怎么 样 呢 ? Fun 困 数 和 希望 
该 参数 所 接收 的 内 容 类 型 是 函数 。 如 末 不 是 也 数 ， 则 无 法 调用 func。 我 们 来 讨论 一 下 该 问题 ， 
请 看 代码 清单 13-3。 
代码 清单 13-3 ”传递 错误 类 型 的 参数 示例 


OhETUnCETOREUTUCNUOmC ET 
002 console.log(func()); // 通过 参数 名 来 调用 函数 




















003| } 

004 

005| var array = []; 

006 var f = function() {} 
O07 





008| Fun(array); // 传递 数组 ， 而 不 是 函数 
我 们 无 法 调用 数组 。 因 此 ， 控 制 台 输出 如 图 13-10 所 示 。 





@ *Uncaught TypeError: func is not a function 
at Fun (Pen.]js:4) 
at pen.]js:9 


图 13-10 ”控制 台 输 出 
如 果 这 出 现在 产品 代码 中 ， 将 会 发 生 问题 。 
3. 保护 函数 人 参数 


解决 方法 就 是 通过 检查 参数 类 型 来 保护 其 值 。JavaScript 中 有 一 个 内 置 的 typeof 运算 符 ， 
可 以 在 调用 函数 之 前 使 用 它 ， 如 代码 清单 13-4 所 示 。 
代码 清单 13-4 ”检查 参数 类 型 

nol function FumCtuncy Tt 


002 // 仅 当 筷 是 肠 数 时 才 进 行 调用 
Da TfCEypeof func == "functionm™) 
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004 consoLe.Log(Cfunc() ) ; 
四 5 了 

006 

007| var array = [|]; 

008| var f = function() {} 

009 


010| Fun(array); // 传递 数组 ， 而 不 是 水 数 





这 时 调用 Fun(array) 。 该 图 数 期 符 参 数 是 函数 名 ， 但 传 过 来 的 是 数组 。typeof 测试 失败 ， 
虽 不 执行 任何 操作 ， 但 至 少 程序 不 会 朋 泪 。 如 果 要 求 特定 值 必须 与 特定 类 型 完全 一 致 ， 则 可 以 
执行 同样 的 操作 。 


13.2 this 关键 字 的 来 源 


this 关键 字 倩 鉴 目 C++。 在 其 原始 设计 中 ，this 关键 字 指 加 类 定义 中 的 对 象 实 例 。 就 是 
这 样 ! 仅 此 而 已 。 但 JavaScript 语言 的 原始 设计 者 似乎 想 使 用 this 关键 字 来 提供 一 个 额外 的 特 
性 一 一 持 有 执行 语 境 的 链接 。 但 是 ， 这 不 应 该 成 为 计算 机 声言 特性 设计 的 一 部 分 ， 而 应 该 脱离 
其 内 部 实现 ， 如 图 13-11 所 示 。 








window 是 Window 类 的 实例 


function Orange() { 
console.log(this); 


} 
// 调用 涵 数 


orange(); // NEED 


// 使 用 函数 来 实例 化 对 象 
Let orange = new Orange() ; // orange 








图 13-11 this 关键 字 的 二 元 性 经 稼 会 让 人 头 犹 ， 得 服用 两 片 布 洛 分 才能 缓解 





虽然 在 任何 编程 语言 中 ， 你 都 无 法 避免 处 理 语 境 ， 但 将 语 境 绑 定 到 this 关键 字 是 错误 的 ， 
因为 这 会 造成 二 元 性 和 许多 混乱 。 箭 头 函 数 后 来 被 提 了 出 来 ， 用 于 解决 this 关键 字 引 起 的 一 些 
问题 。 第 15 章 将 专门 介绍 第 头 函 数 。 








14.1 理论 


高 阶 函数 听 起 来 可 能 很 复杂 ， 但 实际 上 它 比 你 一 直 处 理 的 常规 (一 阶 ) 函数 要 简单 。 顾 名 
思 义 ， 局 阶 函数 是 融 层 次 思维 的 内 容 。 抽 象 就 是 这 样 。 如 下 你 想 在 软件 开发 方面 做 得 更 好 ， 理 
解 抽象 这 一 概念 非常 重要 。 抽 象 关 注 思想 ， 而 不 是 具体 细节 。 一 旦 掌握 了 抽象 ， 它 就 会 成 为 你 
最 好 的 朋友 。 

















14.1.1 抽象 


在 敬 车 途中 ， 你 躁 下 制 动 足 板 时 不 会 考虑 重量 如 何 分 配 、 制 动 钳 中 的 活塞 如 何 将 刹车 厂 推 
到 制 劲 一 上 ， 或 动力 辅助 模式 如 何 增加 你 踩 下 踏板 的 压力 。 你 只 想 将 车 俘 下 来 ， 这 才 是 你 所 期 
望 的 。 此 时 ,你 已 经 在 用 抽象 思维 了 一 一 这 很 日 然 。 


在 编写 软件 应 用 程序 时 ， 和 情况 又 是 什么 样 的 呢 ? 在 下 一 广 中 ， 我 们 将 编写 日 己 的 高 阶 函 数 
map， 它 将 达 代 数组 中 的 每 项 ， 并 对 其 执行 一 个 函数 操作 。 如 果 把 map 函数 放 到 前 面 例子 中 的 
汽车 制 动 系统 中 ， 它 束 是 制 动 踏板 ， 负责 控制 制 动 错 和 活 守 ， 即 一 个 通过 抽象 化 来 处 理 低 级 细 
节 的 机 制 。 因 此 ， 当 调用 map 函数 时 ， 无 须 考 虑 所 有 的 细 方 。 我 们 只 而 望 执 行 菏 个 操作 ， 并 从 
胃 数 返回 预期 的 结果 。 这 非常 棒 ， 但 在 使 用 该 函数 之 前 ， 我 们 必须 设计 其 内 容 ， 并 确定 这 些 细 
万 的 原理 。 


JavaScript 已 经 文 持 一 些 高 阶 函 数 。 但 在 使 用 这 些 困 数 之 前 ， 我 们 移 来 编写 日 己 的 图 数 。 这 
将 有 助 于 加 深 对 高 阶 丽 数 的 理解 ， 除 此 之 外 ， 还 能 玫 助 我 们 加 浴 对 抽 和 象 的 理解 。 



































14.1.2 ”编写 第 一 个 高 阶 了 水 数 


由 于 并 不 是 所 有 的 问题 都 可 以 用 内 置 的 JavaScript 函数 解决 ， 因 此 在 编写 软件 时 ， 你 会 面临 
这 样 的 情形 : 必须 目 己 编写 图 数 ， 或 需要 以 抽象 的 方式 思考 才能 形成 最 有 效 的 解决 方案 。 
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执行 一 个 动作 的 一 阶 函 数 


实际 动作 并 不 在 map 中 执行 ， 而 是 在 作为 参数 传递 给 map 的 函数 中 执行 。 这 意味 者 map 画 
数 并 不 是 只 有 单一 的 用 途 ， 而 是 可 以 通过 传递 给 它 的 函数 执行 任何 操作 。 





我 们 将 创建 map 函数， 并 向 其 传递 一 个 一 阶 函 数 ， 该 一 阶 函 数 的 用 途 只 是 将 数值 递增 1。 
就 像 汽 车 制 动 带 的 例子 一 样 ，map 函数 的 用 户 无 须 关 心 内 部 的 for 循环 是 如 何 届 历 所 有 项 的 。 
我 们 只 是 给 它 一 个 任务 。 为 此 ， 我 们 将 力 一 个 函数 传递 给 融 阶 map 孙 数 。 





注意 : 真正 使 函数 抽象 化 的 是 高 阶 函 数 本 身 无 须 具体 地 知道 它 在 做 什么 。 它 只 是 针对 一 组 值 扫 4 
行 操作 的 逻辑 框架 。 这 与 for 循环 非常 相似 。 实 际 上 ，for 循环 正 是 其 核心 。 但 是 ， 在 
使 用 该 函数 时 ，for 循环 就 不 重要 了 。 你 可 以 将 这 看 作对 for 循环 的 抽象 ( 假设 )。 





高 阶 函 数 通 常 与 一 阶 函 数 一 起 使 用 。 请 不 要 将 高 阶 函 数 看 作 一 种 特性 。 它 们 可 以 表现 为 
for 循环 ， 还 可 以 用 来 实例 化 事件 ， 这 时 ， 一 阶 疯 数 将 会 与 回调 孔 数 一 起 使 用 。 高 阶 函 数 并 
不 限于 单一 用 途 。 它 们 文 持 不 同 的 逻辑 模式 ， 这 是 单独 使 用 一 阶 函 数 所 无 法 实现 的 。 例 如 ， 
Array ,map 将 迭代 一 组 值 并 进行 修改 。Array .reduce 将 一 组 仁 “ 归 约 ” 为 单个 全。 基于 事件 
的 setTimeout 是 一 阶 图 数 ，addEventListener 也 是 如 此 。 











高 阶 函 数 是 将 函数 作为 其 参数 或 返回 函数 (或 二 者 同时 存在 ) 的 函数 。 


14.3 ”抽象 
图 14-1 是 对 高 阶 函 数理 解 的 一 种 可 视 化 展示 。 图 中 对 高 阶 函 数理 解 是 较 高 层面 的 。 




















输入 ja 
数组 高 阶 函 数 从 理论 上 考 卡 如 何 
解决 问题 ， 而 不 考 
虑 实现 细节 
for 御 环 迁 代 器 十 二 
一 阶 逊 数 
七 内 是 加] 
输出 ”数组 


图 14-1 可 视 化 高 阶 函 数 


但 这 仍然 不 能 说 明 它 们 的 使 用 方法 和 实际 功能 。 我 们 来 看 几 个 示例 。 


Array .map 是 最 笛 见 的 高 阶 函 数 之 一 。 它 接受 一 个 图 数 ， 对 数组 中 的 每 项 进行 处 理 ， 然 后 
返回 原始 数组 的 已 修改 副本 ， 如 图 14-2 所 示 。 





function add_one(v) { return v + 1 } 


思 厨 罗 .map(f) +1= 辆 
1 2 
四 +1= 天 


图 14-2 ”高 阶 阴 数 map 









这 里 有 一 种 非常 抽象 的 方法 来 思考 该 问题 ;“ 将 数组 中 的 每 项 部 加 1”"。 这 就 是 在 add_one 
国 数 中 定义 的 简单 逻辑 。 


Array.map 方法 并 不 公开 其 循环 的 实现 ， 其 目的 并 不 是 让 迭代 名 更 遍 效 〈 尽 管 这 样 做 会 有 
带 助 )， 而 是 将 其 完全 隐藏 起 来 。 我 们 只 关注 为 map 方法 提供 一 阶 函数 。 在 内 部 ， 它 将 对 数组 中 
的 每 个 值 执行 该 函数 。 这 是 一 种 非 第 强大 的 技术 ， 可 以 解决 许多 问题 。 但 使 用 局 阶 函 数 的 最 大 
优势 是 它 可 以 抽象 出 问题 的 解决 方 条 。 它 带 助 我 们 专注 于 关键 点 : 对 数组 中 的 每 个 单独 项 执行 
随 数 ， 同 时 抽象 出 for 循环 (或 while 循环 )。 


创建 一 个 孙 数 ， 用 于 修改 这 些 值 。 函 数 体 取决 于 要 对 每 个 数组 项 执行 什么 修改 。 我 们 将 创 
建 一 个 名 为 add_one 的 一 阶 函 数 ， 它 只 会 将 值 加 1， 是 与 高 阶 函 数 一 起 工作 的 辅助 函数 (一 阶 
中 数 和 融 阶 函数 通 弟 一 起 使 用 )， 如 图 14-3 所 示 。 

















// 该 哎 数 将 住 意 数 值 加 1 
function add_one(value) { return value + 1; } 


图 14-3 一 阶 商 数 add_one 
一 个 函数 要 符合 高 阶 函 数 的 条 件 ， 就 需要 将 函数 作为 参数 或 返回 水 数 。 只 要 满足 其 中 一 个 


条 件 ， 我 们 创建 的 就 是 高 阶 函 数 。map 函数 将 处 理 数 组 ， 并 返回 该 数组 的 副本 ， 而 其 中 的 每 项 
都 使 用 我 们 前 面 编 写 的 add_one 困 数 进行 修改 ， 该 图 数 作为 第 2 个 参数 进行 传递 。 


我 们 来 编写 自己 的 map 函数 ， 如 图 14-4 所 示 ， 其 行为 类 似 于 Array .map。 
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// 岛 阶 map 吕 数 的 源 代码 
function map (darFray, 站 ) { 
Let copy = []; // 返回 值 数 组 
for (let index = 0; index “IEGrnnaJ.Length; index++) { 
let original = larraylindex|; 
Let modified = | 月 (original);// 返回 original + 1 
copy[Lindex] = modified; 一 次 生成 一 个 索引 的 返回 值 


return Copy ; 


} 





图 14-4 ”高 阶 函 数 map 的 完整 源 代码 ， 其 中 假定 数组 只 包含 数值 


14.4.1 逐 行 解析 map 男 数 
如 图 14-5 所 示 ，map 困 数 有 两 个 参数 : 值 数 组 和 要 对 数组 中 的 每 项 执行 的 函数 。 


function map (3, 园 ) {I 


图 14-5 ”map 的 函数 参数 


首先 ， 创建 copy 数组 ， 并 将 其 赋 为 空 数组 [] 。 该 数组 用 来 存储 传人 的 原始 数组 的 已 修改 
副本 ( 见 图 14-6 )。 


Let copy = []; // 返回 值 数 组 
图 14-6 创建 copy 数组 


然后 ，for 循环 对 第 一 个 参数 中 接收 到 的 数组 进行 迭代 ， 如 图 14-7 所 示 。 这 是 我 们 要 抽象 
的 一 部 分 。 使 用 该 孔 数 时 ， 无 须 考 虑 该 for 循环 。 


for (Let index = 0; index < FFay.length; index++) { 


图 14-7 ”迭代 第 一 个 参数 中 接收 到 的 数组 
在 循环 内 部 ， 我 们 将 原始 数组 当前 索引 中 的 值 复制 到 临时 变量 original 中 ( 见 图 14-8 )。 
Let original = ErrayLindexj] ; 
图 14-8 ”将 当前 索引 中 的 值 复制 到 临时 变量 中 


现在 ,将 original 变量 中 的 值 传递 给 一 阶 函 数 ， 该 一 阶 函 数 是 通过 参数 传 给 该 函数 的 ， 
如 图 14-9 所 示 。 


Let modified = f (original); 
图 14-9 ”将 临时 变量 中 的 值 传递 给 一 阶 函 数 


f 函数 将 发 挥 作 用 (在 本 示例 中 ， 是 将 原始 值 加 1， 而 它 可 以 是 任何 操作 )， 并 返回 修改 后 
的 值 。 因 此 , 我 们 将 修改 后 的 值 复 制 到 copy 数组 中 , 这 是 修改 后 的 整个 数组 , 如 图 14-10 所 示 。 


copy[index]j = modified; 
图 14-10 ”将 修改 后 的 值 复 制 到 copy 数组 中 
最 后 ， 返 回 修改 后 的 数组 副本 ， 如 图 14-11 所 示 。 
return COpY ; 
图 14-11 返回 copy 数组 
在 所 有 项 都 被 复制 并 由 add_one 函数 处 理 后 ， 它 们 会 被 存储 到 copy 数组 中 ， 该 数组 将 作 
为 函数 的 返回 值 返回 。 


注意 : reduce 方法 也 是 高 阶 函 数 ， 它 使 用 累加 器 。Array.reduce 中 的 受累 加 器 的 作用 与 以 上 
示例 中 的 copy 数组 类 似 。 不 过 , 在 reduce 中 ， 累 加 器 并 不 是 数组 ， 而 是 一 个 单独 的 值 。 
它 将 数组 中 的 所 有 项 累加 在 一 起 ， 并 将 它们 组 合成 一 个 单独 的 返回 值 。 也 就 是 说 ， 在 需 
要 合并 值 时 ，reduce 是 更 好 的 解决 方案 。 


14.4.2 ”调用 自 定义 的 map 函数 


为 了 理解 其 工作 原理 ， 我 们 先 定 义 一 组 要 处 理 的 初始 值 ( 见 图 14-12 )。 


// 原始 数组 对 象 
Let array = [0,1L,2] ; 


图 14-12 定义 原始 数组 对 象 
我 们 来 试 试 目 己 的 map 晒 数 ， 如 图 14-13 所 示 。 


// 我 们 试 试 吧 | 
array = map(array, add_one); // [1,2,3| 


图 14-13 ”执行 map 旺 数 





这 里 的 add_one 是 前 面 编 写 的 图 数 。 它 只 是 将 传递 给 它 的 值 加 1 并 返回 。 绪 来 如 何 呢 ? 原 
始 数组 [0,1,2] 现在 变 为 [1,2,3]， 数 组 中 的 所 有 项 都 增加 了 1。 
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我 们 刚刚 编写 了 目 己 的 map 函数， 其 内 部 执行 的 操作 与 内 置 方法 Array .map 完全 相同 。 这 
种 操作 很 遂 见 ， 它 是 作为 数组 对 象 的 本 地 方法 进行 添加 的 。 


14.4.3 调用 Array.map 





可 以 使 用 内 置 的 数组 方法 map 来 实现 完全 相同 的 操作 。 它 执行 完全 (或 相对 来 说 ) 相同 的 
操作 ， 请 看 图 14-14。 





// 使 用 内 置 的 Array.map 方 法 执行 同样 的 操作 
array.map(add one); // [2,3,41] 


图 14-14 内置 的 数组 方法 map 
这 看 起 来 很 徐 单 ， 我 们 一 开始 就 可 以 使 用 该 方法 。 但 通过 目 己 编写 map 涵 数 ， 现 在 我 们 能 
够 切实 理解 其 内 部 工作 方式 。 这 有 助 于 理解 如 fiLter、every、reduce 等 其 他 的 高 阶 函 数 ， 
它们 都 对 项 上 日 列表 进行 迭代 。 这 些 函 数 的 内 部 代码 都 很 相似 ， 只 存在 一 些 细微 的 差别 。 








14.4.4 for 循环 怎么 了 


如 你 所 见 ，Array .map 在 内 部 实现 了 for 循环。 其 目的 并 不 是 要 实现 更 蜗 效 的 for 循环 ， 
而 是 要 将 它 完 全 隐藏 。 我 们 要 做 的 就 是 为 Array.map 方法 提供 一 个 函数 。 通 过 隐藏 碗 代步 又 ， 
和 镜 下 的 工作 就 是 编写 实际 的 函数 ， 分 别 比 较 、 添 加 或 过 小 每 个 值 。 这 有 助 于 集中 精力 解决 问题 ， 
而 不 必 编 写 和 重 写 大 量 的 代码 。 同 时 ， 这 也 会 让 代码 看 起 来 更 整洁 。 




















14.5 ”注意 事项 


初学 者 往往 使 用 同一 种 方法 来 完成 相似 的 工作 , 而 不 会 考虑 使 用 其 他 方法 。 虽然 这 么 做 “ 仍 
然 可 行 ”， 但 对 此 不 应 掉以轻心 。 


请 使 用 高 阶 函 数 来 解决 它 针 对 的 问题 。 理 解 map、filter、reduce 之 间 的 区 别 非 常 重要 。 
这 不 只 是 由 于 语法 上 的 差 寞 ， 还 因为 这 是 编写 局 效 的 代码 和 避免 反 模 式 的 关键。 因此 ， 请 试 者 
为 目 己 的 任务 找到 合适 的 方法 。 

如 琳 使 用 reduce 可 以 更 高 效 地 完成 相同 的 操作 ， 那 么 请 不 要 使 用 filter。 不 同 的 高 阶 函 
数 是 特别 为 处 理 针 对 其 实现 的 问题 而 设计 的 。 




















15 .1 箭头 范 数 


ES6 引入 了 箭头 郴 数 ， 这 为 在 JavaScript 中 创建 函数 表达 式 提供 了 一 种 简洁 的 语法 。 租 头 也 
数 并 不 使 用 function 关键 字 进 行 定 义 ， 而 是 使 用 如 代码 清单 15-1 所 示 的 语法 。 


代码 清单 15-1 鼻头 函数 的 语法 


001|// 前 关 涵 数 的 语法 
002|() => {}; 





入 头 函数 的 许多 动作 与 标准 函数 相同 ， 它 可 以 被 赋 给 变量 ( 见 代 码 清单 15-2 )。 
代码 清单 15-2 ”将 入 头 函 数 赋 给 变量 


// 创建 一 个 箭头 函数 ， 并 将 其 赋 给 变量 
let fun 1 = () => {}; 


箭头 函数 可 以 通过 杰 量 名 进行 调用 ， 如 代码 清单 15-3 所 示 。 


代码 清单 15-3 ”通过 变量 名 来 调用 租 头 负数 


O01 
9 四 > 








001|// 通过 变量 名 来 调用 箭头 函数 
ED 二 





return 关键 字 可 以 使 箭头 困 数 返回 值 ( 见 代 码 清单 15-4 )。 
代码 清单 15-4 ”从 箭头 函数 返回 值 


001|j// 从 前 尖 涵 数 返 回 值 
002|let fun 2 = () => { return 1; } 





现在 ， 我 们 可 以 通过 和 名称 来 调用 函数 fun_2， 如 代码 清单 15-5 所 示 。 


代码 清单 15-5 ”调用 有 返回 值 的 箭头 晒 数 


o01|fun 2(); // 1 
该 函数 返回 1， 与 预期 相同 。 


15.1.1 无 return 的 返回 


箭头 因数 新 增 了 一 项 特性 ， 不 使 用 return 关键 字 就 可 以 使 其 返回 值 。 人 尽管 代 码 清单 15-6 
的 示例 中 移 除 了 {} 和 return 关键 字 , 但 1 仍然 被 视 为 有 效 的 返回 值 。 这 使 得 代码 比 使 用 元 余 
的 ES5 因数 语法 时 更 整洁 ， 如 代码 清单 15-6 所 示 。 
代码 清单 15-6 不 使 用 return 关键 字 来 返回 值 


001 // 从 租 头 涵 数 返回 值 ， 而 不 使 用 return 关 键 字 
doiec Eon 0 > 





现在 ， 可 以 像 往 党 一 样 ， 轻 松 地 调用 该 限 数 ， 如 代码 清单 15-7 所 示 。 
代码 清单 15-7 调用 fun 3 函数 

001 | fun 3(); :A 1 

请 记 住 ， 在 JavaScript 中 ， 哨 数 是 表达 式 ， 它 们 返回 单个 值 。 其 形式 类 似 于 数学 公式 返回 一 
个 值 。 和 荫 头 困 数 通过 提供 更 简 清 的 语法 〈 去 抒 括 号 ， 以 及 无 须 显 式 指 定 return 关键 字 ) 帮助 
我 们 拓展 思路 ， 如 代码 清单 15-8 所 示 。 
代码 清单 15-8 ”箭头 郴 数 更 简洁 

001| Let expression = e => e; 

神 头 函 数 让 函数 看 起 来 很 像 数 学 方程 式 ( 或 数学 函数 )。 这 就 是 
程 的 原因 ， 如 代码 清单 15-9 所 示 。 


代码 清单 15-9 ”调用 expression 也 数 
001| expression(1); gl 








常用 于 孙 数 式 编 


2 
* 
吏 
深 
HA 





如 条 拥有 数学 育 景 ， 那 么 你 会 对 使 用 苗头 函数 很 束 悉 ! 


15.1.2 ”作为 事件 的 箭头 函数 
有 些 人 认为 使 用 箭头 函数 是 一 种 巧妙 的 事件 解决 方案 ， 如 图 15-1 所 示 。 
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let clicked = (event) => { console.log(event.target) } 
图 15-1 作为 事件 的 箭头 函数 
语法 更 加 简洁 的 版 本 如 图 15-2 所 示 。 


let clicked = event => console.log(event.target); 


图 15-2 更 人 简洁 的 语法 


15.2 ” 稍 头 限 数 的 结构 


箭头 函数 没有 类 数组 的 arguments 对 象 ， 也 不 能 用 作 构 造 函 数 。this 关键 字 指向 箭头 函 
数 外 部 作用 域 中 的 相同 值 。 

简 头 函数 是 表达 式 ， 它 们 并 不 像 常 规 函 数 那 样 使 用 function 关键 字 进 行 定义 ， 也 没有 命 
名 语法 。 但 它们 可 以 像 常 规 函 数 一 样 ， 被 赋予 变量 名 ( 见 代 码 清单 15-10 和 图 15-3 )。 
代码 清单 15-10 ”将 征 头 函数 赋 给 变量 


// 创建 一 个 往 头 洱 数 并 将 它 赋 给 变量 
Te Fim 


(a [] er 


001 
2 





默认 形 参 





a;,/ 

b ;| 

cj 十 

mh: hinv 

在 箭头 函数 中 不 存在 类 数组 的 arguments 对 象 

thnis: 语 境 ， 作 用 域外 与 this 相 等 的 任意 内 容 
return true; 返回 值 


图 15-3 ”第 头 函 数 的 结构 


15.2 ” 葡 头 函数 的 结构 


15.2.1 ” 实 参 


如 代码 清单 15-11 所 示 ， 可 以 通过 形 参 给 箭头 函数 传递 实 参 。 


代码 清单 15-11 ” 带 实 参 的 箭头 也 数 


001|// 带 实 参 的 箭头 函数 语法 
002 Iarolearog2hicezconscle log(arglr arg2) .|， 


001|// 输出 实 参 的 前 头 肠 数 

002|let x = (argl, arg2) => { console.log(argl, arg2); }); 
003 

oadlx e222 


15.2.2 ”从 租 头 函数 返回 


箭头 函数 主要 设计 为 表达 式 ， 因 此 ， 你 可 能 需要 花 充 一 些 时 间 ， 来 学 习 它 们 如 何 返回 值 ， 


如 代码 清单 15-12 所 示 。 
代码 清单 15-12 ”箭头 函数 返回 值 


提要 : 


001| Let boomerang = a => "returns"; 

002| let karma = a => { return "returns"; } 

003| let prayer = a => { return random() >= 0.5 } 
004| Let time = a => { "won't return"; } 


O05 

006 | boomerang(1); // "returns" 
007| karma(1); // "returns" 
008 |, time (1); // [undefined | 
009 


010| // 使 用 高 阶 吕 数 时 要 注意 
011| let a = [1]; 
012| a.map(boomerang); // "returns" 


013|a.map(karma) ; // "returns" 
014|1a.map(time) ; // [undefined] 
OS 


016| Console. log(x); 
017|l console log(y). 
018| console. log(Zz); 
019 

020| // 有 了 时 为 true 


021| prayer("Make me understand JavaScript."); 


马 数 time 是 唯一 不 会 返回 值 的 函数 。 请 注意 不 要 将 该 语法 与 高 阶 函 数 一 起 使 用 。 
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15.3 ES 风格 函数 的 相似 性 


芥 头 函数 和 传统 函数 之 间 存 在 一 些 相 似 性 。 在 大 多 数 情况 下 ， 可 以 顺利 地 使 用 季 头 函数 来 
代 蕉 标准 的 ES5 函数 。 


通过 代码 清单 15-13 的 示例 ， 我 们 来 讨论 一 下 季 尖 函数 。 这 里 首先 定义 了 两 个 传统 的 ES5 
滑 数 classic one 和 classic two， 然 后 定义 了 一 个 ES6 风格 的 季 尖 函数 arrow。 











代码 清单 15-13 ”ES5 函数 和 箭头 函数 的 示例 


001|function classic one() { 


002 Coneeclelecog CasszcEuncEon oODE 
003 Console.log (this); 

004|} 

VNS 

006|var classic two = function() f 

007 Console.log(”"classic function two-7”) ; 
008 console.1log (this); 

009|} 

O010 

01ll|llet arrow = () => { 

Oli2 console Log ("arrow function.”):; 

013 Console.log (this); 

Qua 


每 个 函数 的 作用 域 痢 洪 加 了 console.1log(this); 语句 ， 用 于 查看 结果 。 连 续 调 用 这 3 个 
胃 数 ， 如 代码 清单 15-14 所 示 。 


代码 清单 15-14 ”调用 ES5 困 数 和 箭头 函数 
001|1// 调用 第 1 个 函数 


002|classic one(); 
003 

004|// 调用 第 2 个 涵 数 
005|classic two() ; 
006 

007|// 调用 第 3 个 也 数 
008|arrow(); 


控制 台 输 出 如 图 15-4 所 示 。 
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classic function one. 
p [Window] 
classic function two. 
> [Window] 
arrow function. 
> [Window] 

> | 





图 15-4 ”控制 台 输 出 





当 定 义 在 全 局 作用 域 中 时 , 对 于 this 绑 定 来 说 , 传统 函数 和 蔬 头 函数 之 间 似 乎 没有 什么 区 别 。 45 





15.3.1 无 this 绑 定 


芥 头 函数 并 不 顷 定 this 关键 子 , 它 从 外 部 作用 域 中 查找 this 的 值 ， 这 与 其 他 的 变量 一 样 。 
因此 ， 可 以 次 箭头 函数 拥有 “透明 ”的 作用 域 。 








15.3.2 无 arduments 对 象 





在 箭头 函数 的 作用 域 中 并 不 存在 arguments 对 象 ,如 果 试 图 访问 该 对 象 ,将 会 发 和 后 引用 错误 ， 
如 代码 清单 15-15 所 示 。 


代码 清单 15-15 “在 箭头 困 数 中 无 arguments 对 象 


001| let a = () => { 
002 console.log( arguments ); // arguments 未 定义 
003. 1 


提醒 一 下 ， 在 传统 的 ES5 函数 中 确实 存在 arguments 对 象 ( 见 代 码 清单 15-16 )。 


代码 清单 15-16 ”在 ESS 函数 中 存在 arguments 对 象 








001| Eunction £() { 
002 console.log( arguments ); // arguments 对 象 
003 | } 


15.3.3 ”无 构造 妆 数 


ES5 风格 的 函数 就 是 对 象 的 构造 函数 。 可 以 创建 和 调用 也 数 ， 还 可 以 使 用 对 象 的 构造 函数 
来 (与 new 运算 从 一 起 ) 实例 化 对 象 。 这 样 一 来 ， 子 数 本 号 就 变 为 了 类 定义 。 因 此 ， 经常 有 人 
这 样 讲 :“JavaScript 中 的 所 有 也 数 都 是 对 象 。” 在 ES6 规范 将 箭头 晒 数 引入 JavaScript 之 后 ， 这 
种 说 法 不 再 正确 ， 因 为 第 头 函 数 不 可 以 用 作对 和 象 的 构造 函数 。 因 此 ， 血 头 函数 不 能 用 来 实例 化 


138 第 15 章 箭头 函数 











对 象 。 它 们 最 适合 在 Array.filter、Array.map、Array.reduce 等 方法 中 ， 用 作 事 件 回 调 函 
数 或 函数 表达 式 。 换 句 话 说， 和 包头 函数 更 适用 于 疯 数 式 编程 。 


竺 运 的 是 ， 现 代 JavaScript 很 少 编写 ES5 风格 的 函数 作为 对 象 的 构造 了 负数 。 无 论 如 何 ， 你 
最 好 开始 使 用 class 关键 字 来 定义 类 ， 而 不 是 使 用 构造 疯 数 。 





15.3.4 ”传统 函数 和 租 头 涵 数 用 作 事 件 回 调 函 数 


当 传 统 的 ES5 水 数 和 入 头 函 数 用 作 事 件 回调 函数 时 ， 它 们 之 间 存 在 差异 。 以 下 是 租 头 函数 
的 示例 。 在 蛙 击 文档 时 ， 该 函数 会 输出 字符 串 和 this 属性 ， 如 代码 清单 15-17 所 示 。 


代码 清单 15-17 第 头 函数 用 作 事 件 回 调 函 数 
001|// 创建 一 个 箭头 肠 数 ， 输 出 一 些 信息 








002|let arrow = (event) => { 

003 console.log("Hello. I am an arrow function.”); 
004 console.1log (this).; 

005|} 

Qos 


007|// 将 葡 头 函数 附加 到 文档 的 事件 监听 器 


008 document .addEventListener(”click”, arroOow) ; 
代码 清单 15-18 展示 了 使 用 传统 的 ES5 函数 语法 实现 的 相同 事件 。 
代码 清单 15-18 ”ES5 函数 用 作 事 件 回 调 函 数 


001|Efunction classic(event) 1 





虽 旬 总 Console.log("Hello. I am a classic ES5 function.”).; 
O03 Console.log (this); 

0all 

005 


006|1// 将 ES5 削 数 附加 到 文档 的 事件 监听 器 


007|document .addEventListener(“"click”, classic); 


它们 之 间 有 什么 差异 呢 ? 在 这 两 种 情况 下 单 击 文档 之 后 ， 控 制 台 输出 如 图 15-5 所 示 。 








"Helilo. I am an arrow function.” 
[object Windowl] 


“elilio.. I am a ClassiclESSs FUunct1ion” 
[object HTMLDocumemnt] 


图 15-5 ”控制 台 输 出 





在 箭头 函数 的 作用 域 中 ，this 属性 指向 Window 对 象 。 而 在 传统 的 ES5 函数 中 ，this 属 
性 指向 单 击 的 目标 元 素 。 在 这 里 ， 箭 头 函 数 使 用 了 Window 的 语 境 ， 而 不 提供 单 击 元 素 的 对 象 。 
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15.3.5 ”继承 的 this 语 境 


芥 尖 函数 最 开始 如 何 继承 Window 的 语 境 呢 ?” 是 因为 它 定 义 在 全 局 作用 域 中 么 (与 Window 
类 型 的 对 象 一 样 ) ? 


这 并 不 完全 准确 。 


箭头 函数 根据 其 使 用 位 置 而 非 定 义 位 置 继 承 词法 作用 域 。 在 这 里 ， 箭 头 函 数 在 全 局 作用 
域 的 语 境 (Window 对 象 ) 中 定义 和 调用 。 为 了 充分 理解 该 内 容 ， 请 看 示例 。 将 箭头 晒 数 B 附 
加 到 单 击 事件 。 这 次 我 们 将 在 另 一 个 Classic 类 ( 而 不 是 上 一 个 示例 中 的 Window ) 中 执行 
addEventListener 函数 。 请 记 住 ， 当 使 用 new 运算 符 时 ， 像 执行 对 象 的 构造 函数 那样 来 执行 
该 函数 。 这 意味 着 该 函数 内 部 的 每 条 语句 都 将 在 实例 化 对 象 object 的 语 境 中 执行 ， 而 不 是 在 
Window 的 语 境 中 执行 ( 见 代 人 码 清 单 15-19 )。 


代码 清单 15-19 ” 季 头 函数 在 实例 化 对 象 的 语 境 中 执行 
001|// 使 用 ESS 的 构造 函数 来 定义 新 类 CLassic 


oo | ae eo en | 














003 let B = () => { 

004 console.log("Hellio. I am arrow function B()").; 
005 Console.log (this):; 

006 } 

007 document .addEventListener(”"click”, B).; 

008|} 

009 


OTOlmee Deee Ter CIoagie( /SH 


如 果 使 用 new 运算 符 实例 化 对 象 ， 将 会 创建 一 个 新 的 语 境 。 从 该 对 象 调用 的 任何 内 容 都 拥 
有 目 己 的 霹 境 。 


运行 代码 并 单 击 文档 ， 欣 制 台 输出 如 图 15-6 所 示 。 








“Hello. I am arrow function B().” 
[object Classicl 


图 15-6 ”控制 台 输 出 


[] 中 的 对 象 实例 是 Classic 类 型 。 事件 附加 在 Classic 构造 孙 数 的 语 境 中 ， 而 不 是 像 前 
面 的 示例 那样 附加 在 全 局 作用 域 的 Window 对 象 的 语 境 中 。 


该 事件 实际 上 通过 this 属性 ,将 “执行 它 的 语 境 ” 帝 到 自己 的 作用 域 中 。 这 种 类 型 的 语 境 
链 在 JavaScript 编程 中 很 常见 。 随 后 ， 在 深入 探讨 原型 继承 时 ， 本 书 还 会 介绍 该 内 容 。 现 在 ， 执 
行 语 境 的 概念 开始 变 得 更 加 清晰 。 














动态 创建 HTML 元 索 





JavaScript 为 当前 存在 于 *.html 文档 中 的 每 个 HTML 标签 创建 唯一 的 对 象 。 一 旦 页 面 加 载 
到 浏览 妖 中 , 它们 就 会 自动 包含 到 应 用 程序 的 文档 对 象 模 型 ( document object model, DOM ) 中 。 
如 有 果 要 在 不 编辑 HTML 文件 的 情况 下 漆 加 新 的 元 素 ， 那 该 怎么 办 呢 ? 


创建 一 个 元 素 ， 并 将 其 添加 到 现 有 元 素 中 ， 就 可 以 动态 地 将 其 插 和 人 到 DOM 中， 并 立即 
显示 到 屏幕 上 上， 就 好 像 它 是 直接 在 HTML 的 源 代码 中 键入 的 一 样 。 不 过 ， 该 元 素 并 不 是 使 用 
HTML 标签 语法 直接 键入 到 HTML 文档 中 的 ， 而 是 由 应 用 程序 动态 创建 。 

document 对 象 本 就 提供 createElement 方法 。 该 方法 可 以 用 于 创建 新 的 元 素 ， 如 代码 清 
单 16-1 所 示 。 
代码 清单 16-1 动态 创建 HTML 元 素 


om 
002 let E = document .createElement ("div").,， // 创建 <div> 














001| // 动态 创建 一 些 元 素 





002 let EL = document.createElement ("divVv").; // <div> 
003 ,let E2 = document .createElement ("span").; // <span> 
004 let E3 = document.createElement ("pp").， // <p> 
005 let E4 = document.createElement ("img").; A LM 


006 let ES document .createElement ("input"); // <input> 


这 时 ， 创 建 的 元 素 还 未 附加 到 DOM 中 。 


当 动 态 添 加 新 HTML 元 素 时 ,通常 都 是 将 其 插入 到 DOM 现 有 的 一 个 元 素 中 。 在 此 之 前 ， 
先 对 新 建 的 元 素 设 置 一 些 CSS 样式 。 





16.1 设置 CSS 样式 


到 目前 为 止 ， 我 们 创建 的 空 元 素 没 有 尺寸 、 背 景 闫 色 或 边框 。 这 时 候 ， 该 元 素 的 所 有 CSS 
属性 都 为 默认 值 。 可 以 通过 style 属性 为 标准 的 CSS 属性 赋值 。 请 看 代码 清单 16-2。 
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代码 清单 16-2 设置 CSS 样式 








001|// 动态 创建 <diV> 元 素 

002 let div = document .createElement ("div").; 

QO02 

004 // 设置 元 素 的 ID 

005 .div.setAttribute("id", “element”).; 

006 

007| // 设置 元 素 的 class 属 性 

008 div.setAttribute("class", “box’”).; 

OQ09 

010|// 通过 style 属 性 设置 元 素 的 CSS 样 式 

011 div.style.position = "absolute"; 

012 div.style.display 一 

013 TREETEESIGOER S00 

014 ,div.style.height = "100px”;// 需要 有 pxX 
O01l5|div.style.top = 0; / /px 不 是 必须 为 0 

016| div.style.1left = 0; // px 不 是 必须 为 0 

017 div.style.zIndex = 1000; // z-Index 属 性 ZIndex 

018 div.style.borderStyle = "solid”;// border-styLe 属 性 borderStyLe 
019|jdiv.style.borderColor = "gray”; // border-coLor 属 性 borderCoLor 
020 div.style.borderWidth = “1lpx”; // border-width 属 性 borderwWidth 
0217 div etyle. DackgroungdeColor = "white”.: 

022 div.style.color = “black”; 


在 CSS 中 ， 中 划 线 ( - ) 是 合法 的 属性 名 字符 。 而 在 JavaScript 中 ， 它 总 是 被 解释 为 负 号 。 
如 果 JavaScript 标识 符 的 名 称 中 存在 该 字符 ， 就 会 发 生 错 误 。 因 此 ， 单 个 词 的 CSS 属性 名 可 以 保 
持 不 变 ， 如 style.position 和 style.display; 而 由 多 个 词组 成 的 属性 名 则 需要 变 为 驼峰 式 ， 
即 第 2 个 单词 的 首 字母 大 写 ， 例 如 ，z-index 变 为 zIndex，border-stytLe 变 为 borderStytLe。 























16.2 使 用 appendChild 方法 向 DOM 中 添加 元 素 


element.appendChild(object) 方法 可 以 将 一 个 元 素 插 和 人 到 DOM 中 。 其 中 ，eLement 
可 以 是 DOM 中 现 有 的 任何 元 素 。 所 有 的 DOM 元 素 对 象 都 拥有 该 方法 ， 包 括 document .body。 








16.2.1 document .body 
如 代码 清单 16-3 所 示 ， 使 用 appendChitLd 方法 将 元 素 搬入 到 <body> 标签 中 。 
代码 清单 16-3 ”向 DOM 中 添加 元 素 


001 // 通过 将 元 素 插入 到 <body> 标 签 ， 向 DOM 中 添加 元 素 
002 document .body.appendChildl( div ); 


虽然 <body> 标签 很 稼 见 ， 但 它 并 不 是 唯一 可 以 添加 新 元 系 的 位 置 。 
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16.2.2 getELementById 
如 代码 清单 16-4 所 示 ， 通 过 id， 将 一 个 元 系 插 人 到 另 一 个 元 系 中 。 


代码 清单 16-4 ”将 一 个 元 素 插 入 到 男 一 个 元 素 中 


001| // 将 元 素 揪 入 另 一 个 id 为 "id-1" 的 元 素 中 
002 document .getElementBylId(”id-1”) .appendChild( div ); 


16.2.3 querySelector 
如 代码 清单 16-5 所 示 ， 可 以 将 元 素 插入 到 使 用 有 效 的 CSS 选择 如 选择 的 任何 元 素 中 。 


代码 清单 16-5 “将 元 系 搬 和 人 到 选择 的 父 元 素 中 
// 将 元 素 持 入 到 选择 的 父 元 素 中 


let selector = “”“#parent .inner .target”,; 
document .querySelector( selector ) .appendChildl( div ); 


Qo 
002 
003 





16.3 ”编写 函数 来 创建 元 素 


目 己 编写 困 数 不 仅 很 有 意思 ， 而 且 有 时 也 是 必要 的 。 在 本 中， 我 们 将 目 己 编写 函数 ， 让 
动态 创建 HTML 元 素 更 加 简单 。 在 编写 函数 体 之 前 ， 爷 来 仔细 看 一 下 其 参数 。 





16.3.1 涵 数 参数 








要 适应 大 多 数 的 情况 ， 无 须 涵盖 所 有 的 CSS 属性 ， 而 仪 须 涵盖 那些 对 元 素 外 观 影响 最 大 的 
属性 ( 见 代 人 码 清单 16-6 )。 


代码 清单 16-6 ”主要 的 CSS 属性 


001| let element = (id, // 1d 属 性 

002 type, //"“static”“relative” 必 "absolute” 
Bs // left (可 选 ) 
004 5 // 七 op (可 选 ) 
WE w, A oles (可 选 ) 
006 h, // height (可 选 ) 
9R 去 // z-index (可 选 ) 
008 和 // right (可 选 ) 
009 b) => {// bottom (可 选 ) 
010 /* 函数 体 */ 

011|} 





大 部 分 参数 是 可 选 的 。 如 采 跳 过 参数 ， 那 么 它们 要 么 使 用 默认 值 ( 在 函数 体 中 使 用 const 
关键 子 定义 )， 要么 不 赋值 (例如 传 入 null )。 
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参数 列表 最 后 的 r 和 b (right 属性 和 bottom 属性 ) 将 覆盖 父 元素 左 上 角 的 标准 位 置 。 通 
过 使 用 该 函数 ， 可 以 用 一 行 代码 来 创建 基本 的 HTML 元 素 ， 如 代码 清单 16-7 所 示 。 


代码 清单 16-7 创建 HTML 元 素 


001| // 静态 定位 ， 位 于 0 x 0， 尺 寸 为 100px x 25px，Zz-index 属 性 值 为 ”unset” 
002 let A = element (“1id-1”, “static”, 0, 0, 100, 25, “unset”).; 
003 
004 // 相对 定位 ， 位 于 0 x 0， 尺 寸 为 50px x 25px，Zz-index 属 性 值 为 1 
005 let B = element (“1d-2”, “relative”, 0, 0, 50, 25, 1); 
006 
007|  // 绝对 定位 ， 位 于 10px x 10px， 尺 寸 为 50px x 25px，Zz-index 属 性 值 为 20 
008 let C = element (“1d-3”, “absolute”, 10, 10, 50, 25, 20); 





16.3.2 ”函数 体 


来 看 一 下 元 素 创建 函数 的 函数 体 ， 如 代码 清单 16-8 所 示 。 
代码 清单 16-8 ”将 该 函数 放 入 单独 的 文件 common-styles.js 


001| // 创建 通用 的 HTML 元 素 

002 export let element = (id, type, 1, t, w, h, z, r, b) => { 
003 
004  // 默认 值 一 一 用 来 代替 缺失 的 参数 
国人 后 GONnst posSeEFLroN Cm m0: 

006 Const SIZE = 10:; 

O007 Om 








008 

OO A di | 
010 let diyv = document .createElement ("divVv").， 
011 


012 // 设置 元 素 的 ID 
中 下 马 QIVTSeEALEIEIDUEeE (LIOY IOQ) ， 
014 
015| // 设置 绝对 定位 
016 div.style.position = type; 





(Dal div.style.display = "Diock"; 

018 

019| if (right) // 如 果 提 供 了 right 属 性 ， 则 重新 定位 元 素 

020 div.style.right = ?LT : POSITION + "px"; 
由 2 else 

022 div.style.left = 1 ? 1 : POSITION + "px"; 
3 

024 ifE (bottom) // 如 果 提 供 了 bottom 属 性 ， 则 重新 定位 元 素 
25 divBtyle.bottom = Db ? Db : POSITION TI "px"; 
026 else 

利己 网 div .etvliesleft = EA? :POSIITION TF “px"y 
028 
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029| // 使 用 提供 的 w、h 和 2z 


030 div.style.width = WwW ? W SIZE + "px"; 
Go div. style heghe = Du? hh SLZE TI Ox 
032 div.style.zIndex = Z ? Zz Z; 

QE 

034  ” // 返回 创建 的 元 素 

035 return div; 

036 }; 








创建 UI 元 系 通常 需要 精确 到 像素 级 别 。 该 郴 数 将 创建 一 个 position:absolute 的 元 素 
( 除非 指定 其 他 属性 值 )， 其 宽度 和 高 度 在 默认 情况 下 都 是 10px， 但 是 也 可 以 通过 参数 w 和 hh 传 
入 其 他 值 。 




















顺便 提 一 下 ，HTML 元 素 设 置 为 基于 附着 点 的 绝对 定位 ( 见 图 16-1 )。 


top:0;left:0 top:0;right:0 
绝对 定位 绝对 定位 


绝对 定位 绝对 定位 
bottom:0;left:0 bottom:0;right:0 


图 16-1 基于 附着 点 的 绝对 定位 








请 注意 ， 元 系 可 以 附加 到 父 元 又 中 的 逻辑 坐标 位 置 。 例 如 ，top:0; right:g0 将 元 素 附 加 到 
父 元 素 的 右上 角 。 


当 举 标 为 负 值 时 ， 元 素 的 位 置 将 移动 ， 如 图 16-2 所 示 。 


top:-40px; left:-40px top:-40px; right:-40px 
[ 绝对 定位 绝对 定位 





bottom: -40px; left:-40px bottom: -40px; right:-40px 





图 16-2 这 取决 于 使 用 Left、top、right 和 bottonm 的 组 合 将 元 系 附加 到 的 角 点 


16.3.3 ”导入 并 使 用 absoLute 函数 


我 们 将 前 面 创建 的 因数 导入 工程 中 。 符 要 导入 模块 ，<script> 标签 中 的 type 属性 必须 设 
置 为 "moduLe"， 如 代码 清单 16-9 所 示 。 


代码 清单 16-9 导入 absolute 函数 来 创建 HTML 元 素 


001| <script type = “module”> 


002 

003 // 导入 absoLute 函 数 

004 Import { absolute } from "./commonp-styIes.7s"; 
四 全 三 


006|  // 创建 一 个 位 于 顶部 / 左 侧 的 新 元 素 

O07 let A = absolute(*”1id=1”. 0 .0.100 . 50. 1)s 
008 
009|  // 创建 一 个 位 于 右 侧 /底部 的 新 元 素 

010 let B = absolute(“1id-2”, null, null, 25, 25, 1, 10, 5); 
011 
012| // 将 B 谋 套 到 A 中 
013 B.addElement (A).， 
014 
015 // 将 A〈 及 其 中 瞒 套 的 元 素 B) 添加 到 <body> 
016 document .body.addElement (Al) ; 

QLy 
018| </script> 








现在 ,只 需要 一 行 代 码 就 可 以 创建 一 个 HTML 元素 ,在 该 示例 中 ,我 们 创建 了 两 个 元 素 A 和 B， 
然后 将 元 素 B 般 套 到 元 系 A 中 ， 并 将 元 系 A 附加 到 主体 容 各 。 该 段 代码 的 结果 如 图 16-3 所 示 。 





<body> 





1] Opx 
图 16-3 ”创建 的 元 素 
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16.4 ”使 用 构造 函数 来 创建 对 象 
我 们 来 创建 一 个 名 为 Season 的 函数 ， 如 代码 清单 16-10 所 示 。 
代码 清单 16-10 ”创建 Season 阴 数 


001 function Season(name) { 

002 this.name = name ; 

003 this.getName = function() { 
004 return this.name,; 

005 有。 

006 } 





实例 化 4 个 至 市 ， 如 代码 清单 16-11 所 示 。 


代码 清单 16-11 实例 化 4 个 季 市 


new Season("Winter"); 
new Season("Spring"); 
new Season("Summer"); 
new Season("Autumn"); 


001|, let winter 
002 | Let Spring 
003 Let summer 
004 Let autumn 





如 图 16-4 所 示 ， 我 们 创建 了 4 个 相同 类 型 的 实例 。 


name name name name 
getName 人 ) getName ( ) getName ( ) getName ( ) 


图 16-4 创建 的 4 个 实例 


因为 函数 getName 在 内 存 中 复制 了 4 次 ， 而 其 主体 包含 的 代码 完全 相同 ， 所 以 这 里 产生 了 
一 个 问题 。JavaScript 程序 经 常会 创建 对 象 和 数组 。 想 象 一 下 ， 如 果实 例 化 1 万 其 至 10 万 个 特 
定 类 型 的 对 象 ， 而 每 个 对 象 都 存储 同一 个 方法 的 副本 ， 那 么 这 是 相当 浪费 的 。 我 们 可 以 使 用 一 
个 getName 函数 吗 ? 


答案 是 肯定 的 。 例 如 你 之 前 使 用 的 Array.toString 或 Number.toString， 它 们 的 原生 括 


数 toString 虽然 只 位 于 内 存 的 某 一 个 位 置 ， 但 是 它 可 以 在 所 有 的 内 置 对 象 上 调用 ! JavaScript 
是 如 何 做 到 这 一 点 的 呢 ? 





酒 
己 


17.1 原型 


在 定义 函数 时 ， 会 执行 两 个 动作 : 一 个 动作 是 创建 函数 对 象 ， 这 是 因为 函数 是 对 象 ; 男 一 
个 动作 是 创建 一 个 完全 独立 的 原型 对 象 。 定 义 的 函数 的 原型 属性 将 指向 该 原型 对 象 。 


代码 清单 17-1 定义 了 一 个 新 函数 Human。 
代码 清单 17-1 定义 Human 函数 
001| function Human(name) { } 
可 以 同时 检查 是 否 创 建 了 原型 对 象 ， 如 代码 清单 17-2 所 示 。 


代码 清单 17-2 ”检查 是 否 创建 了 原型 对 象 
oe ei Humane prototyvpe, // obec 





Human.prototype 将 指 问 原型 对 象 。 该 对 象 拥 有 男 一 个 名 为 constructor 的 属性 ， 该 属 
性 指 回 Human 胃 数 ， 如 图 17-1 所 示 。 


function Human() 人 





constructor 


原型 对 象 






图 17-1 prototype 和 constructor 


Human 是 一 个 构造 浮 数 ， 用 于 创建 Human 类 型 的 对 象 。 它 的 原型 属性 指向 内 存 中 的 单独 实 
体 一 一 原型 对 象 。 每 个 唯一 的 对 象 类 型 ( 类 ) 都 有 一 个 单独 的 原型 对 象 。 有 人 会 说 JavaScript 中 
没有 类 。 但 从 技术 上 来 讲 ,Human 是 唯一 的 对 象 类 型 , 它 本 质 上 就 是 一 个 类 。 如 果 拥 有 C++ 背景 ， 





148 第 17 章 原 型 





你 可 以 将 Human 称 为 类 。 类 是 对 象 的 抽象 表示 ， 这 决定 了 其 类 型 。 





请 注意 ， 原 型 属性 不 可 以 用 于 对 象 的 实例 ， 只 可 以 用 于 构造 郧 数 。 在 实例 上 ， 你 可 可 以 通过 
”proto 来 访问 原型 ,最 好 是 使 用 静态 方法 0bject .getPrototype0f(instance)， 这 会 返 
回 与 ”proto 相同 的 原型 对 象 (实际 上 proto () 是 getter )。 


17.1.1 ”对象 字面 量 的 原型 
我 们 创建 一 个 对 象 字面 量 ， 来 描述 一 个 简单 的 示例 ， 如 代码 清单 17-3 所 示 。 
代码 清单 17-3 ”创建 Literal 对 象 字面 量 





001| Let literal = { 

002 BFO 123, 

003 meth: function() {} 
004| }; 








在 内 部 ， 尽 管 它 并 不 是 使 用 new 运算 符 创建 的 ， 但 是 它 作 为 0bject 类 型 的 对 象 连接 到 原 
型 中 ， 如 代码 清单 17-4 所 示 。 


代码 清单 17-4 _ Literal 的 原型 


DOM TEerat 站 站 CEOR， // OQbject 1{} 
002 , literal.__proto__.constructor; // f Object { [本 地 代码 ] } 
oniiteral Con Cocor.: // f Object { [本 地 代码 ] } 


如 图 17-2 所 示 ， 当 创建 Literal 时 ，literal. proto ”就 会 连接 到 0bject.prototype。 


Object.prototype 


._proto 


.prop: 123 
.meth: f() 








图 17-2” 对象 字 面 量 proto 指向 0bject.prototype 
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JavaScript 内 部 已 经 创建 了 0bject.prototype。 每 当 定义 新 对 象 时 ， 都 会 创建 一 个 二 级 
对 象 ， 作 为 其 原型 。 


17.1.2 ”原型 链接 

如 代码 清单 17-5 所 示 ， 当 使 用 new 关键 字 实 例 化 对 象 时 ， 构 造 另 数 就 会 执行 ， 创 建 该 对 象 
的 实例 。 
代码 清单 17-5 ”使 用 new 实例 化 对 象 

001 Let instance = new Object() ; 

002 instance.prop = 123; 

003| instance.meth = function(){} 


在 该 示例 中 ， 执 行 0bject 的 构造 函数 ， 会 得 到 一 个 构造 好 的 链接 ， 如 图 17-3 所 示 。 
Object.prototype 


.prototype 内 置 





实例 
图 17-3 ”原型 链接 


prototype 属性 执行 单独 的 对 象 一 一 内 置 的 原型 对 象 ， 在 该 示例 中 即 0bject .prototype。 
它 类 似 于 前 面 示 例 中 的 Human.prototype， 我 们 并 不 控制 对 象 的 创建 方式 ， 因 为 0bject 是 预 


先 存 在 的 内 置 类 型 。 
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0bject 类 型 的 对 象 实 例 拥 有 ”proto 属性， 后 者 指向 构造 函数 的 原型 对 象 。0bject、 
创建 的 二 级 原型 对 象 入 ”proto 指向 0bject 的 原型 对 象 的 实例 ， 这 三 者 之 间 的 这 种 三 向 关 
系 是 一 种 特殊 的 结构 。 该 模式 仅 表 示 对 象 原型 链 中 的 一 个 链接 。 





17.1.3 ”原型 链 


如 图 17-4 所 示 ， 可 以 说 Array 是 0bject 类 型 的 子 对 象 。 


null Epoio 
proto 
.prototype 
Object.prototype 
.constructor 
a 1 
__proto 
.brototype 
Array.prototype 
.constructor 





图 17-4 原型 链 


0bject .prototype 就 是 0bject, 但 这 并 不 是 因为 0bject 继承 自 0bject， 而 仅仅 是 因为 
原型 本 里 就 是 对 象 ， 它 们 是 同时 存在 的 。 


可 以 认为 0bject 的 原型 是 null， 因 为 它 是 原型 链 上 的 项 层 对 象 。 换 名 话说 ，0bject 没有 
抽象 原型 。 与 其 他 类 型 一 样 ，0bject 也 有 一 个 “ 幽 录 ”原型 对 和 象 。 








17.1.4 ”查找 方法 
请 看 图 17-5。 
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null .proto 


.prototype V toString 


.constructor 


ADrow 


.prototype xX .toString 


.constructor 





图 17-5 方法 的 查找 路 径 


当 调 用 Array.toString 时 ， 实 际 的 动作 是 : JavaScript 先 在 Array 对 象 的 原型 上 查找 
toString 方法 ， 但 并 未 找到 该 方法 ; 接 下 来 ，JavaScript 决定 在 Array 的 父 类 0bject 的 原型 
属性 上 查找 toString 方法 ， 最 终 它 找 到 0bject.prototype.toSstring， 并 执行 后 者 。 


17.1.5 “数组 方法 


17.1.3 节 介 绍 了 原型 链 ， 以 及 如 何 通过 这 有 历 原 型 链 来 找到 toString 方法 。toString 对 所 
有 源 于 0bject 类 型 ( 这 是 最 基础 的 内 置 类 型 ) 的 对 象 都 是 可 用 的 。Number 、String 和 布尔 等 
内 置 类 型 也 是 如 此 。 你 可 以 对 它们 调用 tostring 方法 , 但 该 方法 仅 存 在 于 0bject.prototype 
属性 的 内 存 位 置 。Array 类 型 的 本 地 方法 应 该 存在 于 Array.prototype 对 象 中 。 


很 明显 ， 像 map、fiLter 和 reduce 这 样 的 高 阶 疯 数 用 于 Number 或 布尔 类 型 ， 并 没有 多 
大 用 处 。 实 际 上 ， 每 个 数组 方法 都 存在 于 Array.prototype 中 〈 见 图 17-6 )。 如 有 果 要 特别 扩展 
数组 方法 的 功能 ， 则 需要 将 方法 附加 到 Array.prototype.my _method。 











vi constractors ¥, concats 天 ，COpyNEEATI2 天 02 FF, finds 天 图 
> Concat: f concat() 
pb constructor: 7 Array() 
pb copyWithin: f£ copyWithin() 
bentries: f entries() 
> every: f every() 
wlls oF Fr 





pfind: f£ find() 

p> findIindex: f findIndex() 

>flat: £ flat() 

pflatMap: 7 flatMap() 

> forEach: f£ forEach() 

bincludes: f£ incLudes() 

pindexof: 大 indexOof() 

> join: £ join() 

> keys: f keys() 

> lastIindexOof: f£ LastIndexOof() 
length: 6 





> pop: f pop() 
bpush: f£ push() 






图 17-6 Array.prototype 对 象 中 的 fiLter、map 和 reduce 


17.2” 父 对 象 


Array、Number 等 是 如 何 知 站 0bject 是 其 父 对 象 的 呢 ? 这 正 是 原型 继 素 的 目的 : 在 子 对 
象 和 父 对 象 之 间 创 建 链 接 。 这 通常 被 称 为 原型 链 。 


另外 ， 可 以 说 原型 结构 类 似 于 C++ 中 “传统 ”( 或 “经 典 ”) 的 类 继承 ， 这 是 为 数 不 多 的 真 
正面 向 对 象 的 编程 语言 之 一 ( 它 实际 上 支持 所 有 特性 ， 这 使 得 语言 看 起 来 是 面向 对 象 的 )。 
17.2.1 扩展 自己 的 对 象 


Array 和 Number 的 父 对 象 是 0bject。 这 很 好 ,但 如 果 要 从 另 一 个 对 象 来 扩展 自己 的 对 象 ， 
那 会 怎么 样 呢 ? 正如 我 们 在 前 面 的 示例 图 中 看 到 的 ，getter 方法 proto “是 内 部 原型 实现 的 
一 部 分 。 这 是 建立 链接 的 关键 ， 而 我 们 不 应 该 直接 触 碰 它 。 
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JavaScript 是 一 门 动态 类 型 语言 ， 因 此 ， 你 可 以 试 着 创建 一 些 对 象 构造 函数 ， 并 将 它们 的 原 
型 对 象 上 的 _proto 属性 重新 连接 到 父 对 象 。 但 是 ， 这 通常 被 认为 是 取 巧 的 做 法 。 在 实际 编 
码 时 ， 无 须 这 样 做 。 实 际 上 ， 没 有 也 不 可 能 有 软件 可 以 修改 原型 的 内 部 功能 。ES6 之 后 的 版 本 
欧 励 大 家 使 用 关键 字 class 和 extends 来 创建 和 扩展 类 ， 这 使 得 JavaScript 关注 原型 链接 。 





17.2.2 constructor 属性 


如 图 17-7 所 示 ，0bject 类 的 constructor 属性 指向 Function。 
function Object() 分 function Function() 他 


图 17-7 0bject 类 的 constructor 属性 


如 图 17-8 所 示 ，Function 类 的 constructor 属性 指向 Function。 


mem el 


function Function() 他 function Function() 分 





图 17-8 ”Function 类 的 constructor 属性 





围绕 Function 类 创建 循环 依赖 ， 如 图 17-9 所 示 。 


function Object() 全 function Function() 全 function Function() 全 


图 17-9 ”循环 依赖 


Function,constructor 是 Function (循环 )， 而 0bject.constructor 也 是 Function。 
这 表示 Function 类 是 使 用 孔 数 构造 的 ， 而 Function 本 身 就 是 类 。 这 就 是 循环 依赖 关系 。 
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17.2.3 Function 


Function 是 所 有 对 象 类 型 的 构造 两 数 ， 如 图 17-10 所 示 。 





图 17-10 构造 国 数 Function 
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17.3 ”原型 实践 


理解 原型 的 工作 方式 是 一 个 循序 渐进 的 过 程 。 考 虑 到 JavaScript 语言 多 年 来 的 发 展 ， 这 可 能 
征 一 项 艰巨 的 任务 。 为 了 更 好 地 理解 它 的 工作 方式 ， 我 们 从 头 开 始 介绍 。 


17.1 市 介绍 了 原型 的 理论 。 本 市 将 介绍 实际 编写 代码 时 ， 如 何 从 全 局 来 实现 原型 。 本 市 是 
一 个 完整 的 练习 ， 演 示 了 使 用 对 和 象 的 不 同方 法 。 我 们 将 从 对 和 象 字 面 量 开始 学 习 。 











17.3.1 对象 字 面 量 


本 示例 使 用 简单 的 对 象 字面 量 语法 来 定义 cat 对 象 。JavaScript 内 部 以 某 种 方式 将 所 有 的 
原型 链接 连接 起 来 。 在 接 下 来 的 几 季 中， 我 们 将 在 此 基础 上 逐步 更 新 该 示例 ， 最 终了 解 原型 对 
JavaScript 程序 员 有 何 帮 助 。 请 看 代码 清单 17-6。 
代码 清单 17-6 ”遇见 猫 Felix， 使 用 对 象 字 面 量 来 表示 它 

Tile 

















0Q02 

003| cat.name = "Felix"; 
004 cat.hunger = 0; 
D005ICat .enereyw 一 下 |， 

006 cat.state = "idle"; 





我 们 给 狂 取 名 为 Felix ,并 使 它 具 有 0 级 的 饥饿 感 和 1 单位 的 能 量 。 目 前 Felix 处 于 空闲 状态 ， 
并 且 惑 在 我 们 想 要 它 待 的 地 方 ! 请 看 代码 清单 17-7。 


代码 清单 17-7 设置 Felix 的 属性 


001| // 通过 睡眠 来 恢复 能 量 

002| cat.sLeep = function(amount) { 

003 this.state = "sleeping"; 

004 console.log( {S$this.name} is ${this.state}. ); 
005 this.energy += 1; 

006 this.hunger += 1; 





603 | } 

008 

009 | // 有 睡 醒 

010| cat.wakeup = function() { 

nl this.state = "idle"; 

012 console.log( {$this.name} woke up. ); 
013| } 

014 





PT 让 吃 到 不 饿 为 正 
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016| cat.eat = function(amount) { 


LL this.state = "eating"; 

018 console.log( ${this.name} is ${this.state} 
019 Ss{amount} Un 上 Cs ef food Ya 
020 if (this.hunger -= amount <= 0) 

Qa this.energy += amount; 

022 else 

日 23 this.wakeup() ; 

024| } 

025 


026  // 游 蕊 会 消耗 能 量 

027| // 如 有 必要 ， 会 睡 $S 小 时 ， 来 恢复 能 量 

028| cat.wander = function() { 

029 this.state = "wandering"; 

030 console.log( {S$this.name} is ${this.state}. ); 
Wa if (~—-thisenerey « 1) 

032 this.sLeep(5) ; 

| 





sleep、wakeup、eat 和 wander 等 方法 直接 添加 到 了 cat 对 象 的 实例 中 。 每 个 方法 都 有 
基本 的 实现 ， 可 以 恢复 或 消耗 猫 的 能 量 ， 如 代码 清单 17-8 所 示 。 


代码 清单 17-8 调用 sleep 方法 ， 来 恢复 猫 的 能 量 
eT I 
17.3.2 ”使 用 Function 构造 函数 
即使 睡 了 一 党 ，Felix 仍然 有 些 忧郁 。 它 需要 一 个 朋友 。 


如 代码 清单 17-9 所 示 ， 可 以 将 相同 的 代码 放 到 一 个 名 为 Cat 的 函数 中 ， 而 不 是 创建 一 个 新 
的 对 象 字 面 量 。 


代码 清单 17-9 ”定义 公用 的 Cat 图 数 


001| function Cat(name, hunger, energy, state) { 


002 

003 let cat = {}; 
004 

005 cat.name = name ; 


006 cat.hunger = hunger ; 
007 cat.energy eneregy,; 
008 Cat state = States 

009 





17.3 ”原型 实践 157 


010 cat.sleep = function(amount) { /x* 实现 x/ } 
Bl cat.wakeup = function(amount) { /x* 实现 */ } 
ET cat .eat = function(amount) { /x* 实现 x/ } 
013 cat.wander = function(amount) { /* 实现 */ } 
014 
日 号 returiy Sat: 
016| } 








请 注意 ， 此 处 将 上 一 节 中 编写 的 代码 原封 不 动 地 移 到 一 个 函数 中 ， 并 使 用 return 关键 字 
返回 对 象 。 方 法 的 实现 也 保持 不 变 。 这 里 使 用 注释 /* 实现 */ 来 避免 重复 编写 相同 的 代码 。 
如 代码 清单 17-10 所 示 ， 现 在 我 们 精简 代码 ， 创 建 了 两 只 猫 : Felix 和 Luna。 


代码 清单 17-10 ”创建 两 只 猫 


iB| let Teli = Cati"Fetlix”, 190. §, "idte”): 

019 felix.sleep(); // "Felix is sleeping." 

020 | feLix.eat(5) ; /| "Felix 1s eatTng 5 unit{(s) of food." 
021| felix.wander(); // "Felix is wandering." 

0 和 2 和 2 
23| tet. Luns = Gat{("Luna", 8 SG TdLe 

024 | luna.sleep(); // "Luna is sleeping." 

025| luna.wander(); // "Luna is wandering." 


026 luna.eat(1); // "Luna 1s eating 1 unit(s) of food." 


17.3.3 ”原型 














从 前 面 的 示例 中 ， 我 们 发 现 一 个 问题 。feLix 和 Luna 的 所 有 方法 占用 的 内 存 空间 是 之 前 的 
两 倍 。 这 是 因为 我 们 为 每 只 猫 创建 了 两 个 对 象 字面 量 。 这 就 是 原型 要 解决 的 问题 。 为 什么 不 把 
所 有 的 方法 都 放 在 内 存 中 的 一 个 位 置 呢 ? 请 看 代码 清单 17-11。 


代码 清单 17-11 将 所 有 的 方法 放 在 内 存 中 的 一 个 位 置 


001| const prototype = 1 

002 sleep(amount) { /* 实现 */ }， 
99 wakeup(amount) { /x* 实现 x/ }， 
004 eat(amount) { /x* 实现 x*/ }， 
QOE wander(amount) { /* 实现 x*/ } 
006 | } 














现在 ， 我 们 包 帮 好 的 所 有 方法 都 共 齐 内存 中 的 一 个 位 置 。 


我 们 再 回 到 Cat 类 的 实现 。 如 代码 清单 17-12 所 示 ， 将 prototype 对 象 中 的 方法 直接 连接 
到 对 象 中 的 每 个 方法 。 
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代码 清单 17-12 ”连接 prototype 和 Cat 的 每 个 方法 


001 
002 
003 
004 
005 
006 
007 
008 
009 
010 
QL 
012 
013 
014 
Q1S 
016 





function Cat(name, hunger, energy, state) { 


let cat = {}; 


cat.nName = name; 
cat.hunger = hunger ; 
cat.energy = energy; 
Cal a State = SLS 人， 


cat.sleep = prototype.sleep; 

cat.wakeup = prototype.wakeup; 
cat.eat = prototype.eatsLeep ; 
cat.wander = prototype.wander ; 


return, sat; 


} 


在 了 解 JavaScript 如 何 做 到 这 一 点 之 前 ， 我 们 先 来 了 解 一 些 其 


17.3.4 ”使 用 0bject.create 来 创建 对 象 


在 JavaScript 中 ， 我 们 还 可 以 使 用 0bject.create 方法 来 创建 对 象 ， 该 方法 将 一 个 现 有 对 
象 作为 其 参数 ( 见 代 码 清 单 17-13 )。 


代码 清单 17-13 ”使 用 create 方法 创建 对 象 


001 
002 
003 
004 
005 
006 
007 
008 
009 





const cat = { 
name: "Felix", 
states "Tdle", 


hunger: 1 
} 
const kitten = Object.create(cat); 
kitten.name = "Luna"; 
kitten.state = "sleeping"; 


现在 来 看 一 下 kitten， 如 代码 清单 17-14 所 示 。 


代码 清单 17-14 输出 kitten 


To edeT :Te Wo: en on eT 


他 内 容 。 


奇怪 的 是 ，kitten 对 象 只 有 两 个 方法 ， 缺 少 了 hunger 属性 ， 如 图 17-11 所 示 。 
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pfname: "Luna", state: "slLeeping"} 
> | 
图 17-11 kitten 缺少 hunger 属性 
为 了 解释 其 原因 ， 我 们 试 着 输出 该 属性 ， 并 观察 会 发 生 什 么 情况 ， 如 代码 清单 17-15 所 示 。 
代码 清单 17-15 ”输出 hunger 属性 
001| console.log(kitten.hunger); 


控制 台 输 出 如 图 17-12 所 示 。 





1 
> | 


图 17-12 ”控制 台 输 出 
从 控制 台 输 出 可 知 ，hunger 属性 确实 存在 。 这 是 怎么 回 事 呢 ? 


这 是 使 用 0bject,create 方 法 创建 的 对 象 特有 的 动作 。 当 我 们 试 着 获取 kitten,.hunger 时 ， 
JavaScript 将 查看 kitten.hunger， 但 找 不 到 它 〈 因 为 它 并 不 是 直接 在 kitten 对 象 的 实例 上 创 
建 的 )。 


然后 ，JavaScript 会 查看 cat 对 象 中 的 hunger 属性 。 因 为 kitten 是 使 用 0bject.create(cat) 
创建 的 ， 所 以 kitten 认为 cat 是 它 的 父 对 象 ， 因 此 它 会 查看 cat 对 象 。 


最 后 ，kitten 在 cat.hunger 中 找到 hunger 属性 ， 在 控制 台 上 输出 1。 同 样 ，hunger 属 
性 在 内 存 中 仪 存储 一 次 。 


17.3.5 ”示例 继续 





我 们 再 回 到 之 前 的 示例 ， 现 在 我 们 已 经 具备 了 0bject.create 的 知识 ， 可 以 改写 Cat 果 数 
了 ， 如 代码 清单 17-16 所 示 。 


代码 清单 17-16 “改写 Cat 函数 
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008| function Cat(name, hunger, energy, state) { 


009 

010 Let cat = Object.create(prototype); 
bl 

012 cat.name = Name; 


13 cat.hunger = hunger ; 
014 cat energy = énergy; 
015 cat .state = state; 
016 
017|  // 我 们 不 再 需要 这 些 代 码 

018 // cat.sleep = prototype.sleep; 
019 // cat.wakeup = prototype.wakeup; 
020 // cat.eat = prototype.eatsLeep ; 
O02 // cat.wander = prototype.wander ; 
022 
023 return cat; 
024 | } 








我 们 删 掉 将 自己 的 原型 对 象 与 Cat 类 的 方法 连接 的 部 分 ， 而 将 它们 传递 给 本 地 的 0bject， 
create 方法 ， 该 方法 现在 位 于 Cat 晒 数 中 。 


现在 可 以 通过 这 个 新 的 Cat 函数 来 创建 felix 和 Luna， 如 代码 清单 17-17 所 示 。 


代码 清单 17-17 使 用 新 的 Cat 函数 来 创建 felix 和 Luna 


OOM lec relix East FeLix ELOR 5 ULUe 小 ， 
002 | felix.sleep(); // "Felix 1s sleeping." 
g0s 
004 | let luna = Cat("Luna", 8, 3, "idle"); 
005 | luna.sleep(); // "Luna is sleeping." 








现在 的 语法 是 最 佳 的 ，sLeep 在 内 存 中 仪 定义 一 次 。 无 论 创建 多 少 个 felix 或 Luna， 都 不 
会 因为 方法 而 浪费 内 存 ， 因 为 它们 只 定义 一 次 。 


17.3.6 ”构造 浮 数 





我 们 回顾 一 下 , 每 个 对 象 部 有 一 个 原型 属性 , 指向 其 隐 式 原型 对 象 , 如 代码 清单 17-18 所 示 。 


代码 清单 17-18 输出 原型 属性 
001| consote.Log(typeof Object.prototype); // "objectn 


因此 ， 现 在 可 以 将 所 有 的 Cat 也 数 直接 附加 到 其 内 置 的 原型 属性 ， 而 不 是 我 们 先前 创建 的 
prototype 对 象 ( 见 代 码 清 单 17-19 )。 
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代码 清单 17-19 将 Cat 函数 下 接 附 加 到 内 置 的 原型 属性 


001| function Cat(name, hunger, energy, state) { 


002 

003 let cat = Object.create(Cat.prototype); 
O004 

005 cat.name = name; 


006 cat.hunger = hunger; 
yo cat energy = eneregey; 
008 cat .state = state; 
yg 
010 return cat; 
Oe 


013 | // 在 实际 的 Cat .prototype 对 名 上 定义 方法 

014| Cat.prototype.sleep = function { /x*x 实现 */ }; 
oisllCeat Drototyvpe Wakeup = Tunctiomn /No ): 
016 Cat.prototype.eat = function { /x* 实现 x/ }; 
017| Cat.prototype.wander = function { /x 实现 x*x/ }; 


GOL Let luna = St LUna 5S, 1 "SLleepine")> 

002 | luna.sleep(); // "Luna 1s sleeping." 

在 这 种 情况 下 ，JavaScript 将 先 在 Luna 对 象 上 查找 sleep 方法 ,但 找 不 到 它 ; 然后 JavaScript 
会 在 Cat .prototype 上 查找 sleep 方法 ， 并 在 找到 后 进行 调用 。 





同样 ，wakeup 方法 也 会 在 Cat.prototype.wakeup 上 执行 ， 而 不 是 在 实例 本 身上 执行 ， 
如 代码 清单 17-20 所 示 。 
代码 清单 17-20 ”调用 wakeup 方法 

001|Let felix = Cat("Felix", 5, 1, "sleeping"); 

002 felix.wakeup(); // "Felix woke up." 

因此 ， 原 型 主要 是 作为 一 种 特殊 的 查找 对 象 保 存在 内 存 中 ， 并 在 使 用 其 构造 函数 实例 化 的 
所 有 对 和 象 实例 之 间 进 行 共 人 圣 。 











17.3.7 ”new 运算 从 





至 此 我 们 可 以 清除 前 面 讲 到 的 所 有 内 容 ， 使 用 new 运算 符 来 替代 ， 该 运算 符 会 自动 执行 前 
面 几 市 中 探讨 的 每 项 操作 ! 如 代码 清单 17-21 所 示 。 


代码 清单 17-21 删除 0bject.create 和 return cat 





001ifunction Cat(name, hunger, energy, state) 1 


go0s cat.name = name 
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004 cat.hunger = hunger; 
Os Cat emerey = enerey, 
006 cat StaLe = Starve; 


008 } 





我 们 从 类 定义 中 删除 0bject.create 和 return cat。 


在 JavaScript 中 ， 使 用 function 关键 字 定 义 的 函数 会 被 提升 。 这 意味 着 可 以 在 定义 Cat 之 
前 向 Cat .prototype 中 添加 方法 ， 如 代码 清单 17-22 所 示 。 


代码 清单 17-22 ”定义 一 些 方法 


001 1// 在 Cat,.prototype 对 象 上 定义 一 些 方法 
002|Cat.prototype.sLeep = function { /x* 实现 */ }; 
003| Cat.prototype .wakeup = function { /x* 实现 */ }; 
004|Cat.prototype .eat = function { /* 实现 */ }; 
005|Cat.prototype.wander = function { /* 实现 */ }; 





随后 定义 Cat， 如 代码 清单 17-23 所 示 。 


代 T 7 23 /voat 


007 ,function Cat(name, hunger, energy, state) { 
008 cat.name = name ; 

009 cat.hunger = hunger ; 

010 cat .energy = eneregy; 

后 可 catvSstate = state; 

012|} 


现在 ， 像 代码 清单 17-24 所 展示 的 这 样 实例 化 Luna 和 felix。 
代码 清单 17-24 ”使 用 new 来 实例 化 Luna 和 felix 


614|Let Luna = new Cat("Luna", 8, 3, "idle"); 

015| luna.sleep(); // "Luna is sleeping." 

016 

dig|let fetix = new Cat("Felix'", 5, lx "sleeping")s 
018 felix.wakeup(); // "Felix woke up." 


17.3.8 class 关键 字 


前 面 对 原 型 的 所 有 探讨 都 集中 在 class 关键 字 上 ， 这 是 ES6 中 新 增 的 。 在 关于 JavaScript 的 
面试 中 ， 原 型 的 工作 方式 是 一 个 很 常见 的 问题 。 在 工作 中 ， 前 问 软 件 工 程 师 却 很 少 会 接触 到 它 。 


请 看 代码 清单 17-25。 
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代码 清单 17-25 ”使 用 class 关键 字 来 定义 Cat 类 


OT Elass, Cat 
002 constructor(name, hunger, energy, state) { 


003 this.name = name; 

004 this.hunger = hunger ; 
005 this.energy = energy; 
006 this.state = state; 
007 } 


008 sleep() { /x* 实现 大/ }; 
009| Wakeup() { /x* 实现 x/ }; 





010 eat() { /* 实现 x*/ }; 
011| wander { 实现 /上 上 
012 | } 


请 用 关键 字 class 和 new， 让 JavaScript 自行 处 理 原型 。 


下 一 曹 将 进一步 利用 该 概念 ， 通 过 继承 和 对 象 组 合 ， 以 及 函数 式 编 程 ， 使 用 面 加 对象 编程 
的 多 态 来 设计 整个 应 用 程序 。 











面 同 对 象 编程 


在 本 草 中 ， 我 们 将 构建 一 个 之 炉灶 的 灶 台 ， 并 通过 该 示例 来 了 解 面 向 对 象 编程 (object- 
oriented programming，OOP )。OOP 的 最 佳 示 例 是 基于 许多 不 同类 型 的 对 象 。 我 们 为 每 个 抽象 类 
型 定义 一 个 类 :， Fridge、Ingredient、Vessel、Range、Burner 和 0ven， 并 将 根据 OOP 与 
JavaScript 代码 的 实际 关系 ,来 了 解 两 个 重要 的 OOP 原则 : 继承 和 多 态 。 





18.1 Ingredient 


Ingredient 类 是 泛 型 类 ， 用 来 实例 化 原料 。 它 包含 name 、type 和 calories 等 属性 ， 这 
些 属 性 足以 描述 所 需 的 几乎 所 有 原料 。 


将 要 创建 的 常见 原料 包括 水 、 橄 杭 油 、 肉 汤 、 红酒 、 月 桂 叶 、 胡椒、 牛肉 、 鸡 肉 、 培根、 菠萝 、 
平 末 、 蓝 每 、 衣 巡 、 明 萝卜 、 土 豆 、 鸡 集 、 奶 栈 、 调 味 汁 、 阁 麦片 、 大 米 和 米 米 。 这 是 够 做 几 
顿 丰盛 的 饭菜 了 ! Ingredient 类 本 里 拥有 静态 属性 ， 以 描述 原料 的 类 型 。 














18.2 FoodFactory 


FoodFactory 类 会 创建 一 个 全 新 的 原料 实例 。 这 样 我 们 就 不 会 同时 在 不 同 的 受 饪 炊具 中 重 
复 使 用 相同 的 Ingredient 对 象 实例 。 你 也 许 知 者 ,在 JavaScript 中 ， 变 量 名 只 是 对 同一 对 象 实 
例 的 引用 (链接 )。 





18.3 Vessel 
烹饪 炊具 类 Pot 、Pan 和 Tray 体现 了 继承 的 概念 ， 因 为 它们 派生 自 同一 个 抽象 类 Vessel， 
如 图 18-1 所 示 。 


Vessel 类 拥有 add 方法 ， 用 于 添加 原料 。 这 样 我 们 就 可 以 选择 将 哪些 原料 放 在 每 个 创建 的 
炊具 中 炖 痢 或 烘焙 〈 这 取决 于 选择 的 炊具 类 型 )。 
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class Vessel 


继承 


3 


class Pot class Pan class Tray 
图 18-1 类 的 继承 


18.4 Burner 


灶 台 上 有 4 个 灶 眼 ， 都 是 Burner 类 的 唯一 实例 。 可 以 使 用 on 或 off 来 打开 或 关闭 炉灶 ， 
如 图 18-2 所 示 。 


全 





A 有 下 


Let burner = new Burner(BurnerIindex.UpperLeft); 
Let skillet = new Pan("cast 1ron"); 


burner.place(skillet); // 将 前 锅 放 在 炉灶 上 
burner .on(); // 打开 炉灶 
range.run(1); /7 :加 贡 1 分 名 


图 18-2 ”实例 化 4 个 灶 有 眼 
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装 有 原料 的 炊具 可 以 放 在 4 个 灶 眼 上 。 


如 果 打 开 炉 灶 ， 人 炉灶 的 状态 即 为 on， 其 上 炊具 中 的 所 有 东西 部 会 被 视 为 将 要 京 任 ,但 仪 当 
灶 台 调用 range.run( 分 钟 数 )， 且 运行 一 段 时 间 时 ， 它 才 会 被 视 为 正在 京 饪 。 


18.5” 灶 台 类 型 与 多 态 炉 灶 


如 图 18-3 所 示 ，RangeType.Gas 和 RangeType.Electric 表示 不 同 加 热 方 式 的 内 部 实现 。 








RangeType.Gas RangeType.Electric 


人 人 


0 0 0 0 0 0 0 0 


多 态 


图 18-3 多 态 的 示例 





我 们 不 会 深入 讨论 煤气 灶 和 电炉 的 具体 实现 ， 而 只 会 编写 一 个 加 热 兄 数 ， 以 将 能 量 单位 转 
换 为 热量 单位 。 其 主要 思想 是 ， 即 使 RangeType 实现 可 以 从 Gas 变 为 Electric， 灶 台 的 API 
代码 仍然 无 须 修 改 即 可 正常 执行 。 











在 这 里 ， 多 态 是 通过 对 象 组 合 来 展示 的 ， 后 者 将 一 个 0ven 对 和 象 直 接 集 成 到 Range 对 象 中 。 
对 和 象 组 合 将 两 个 或 更 多 个 对 和 象 组 合 在 一 起 来 实现 多 人 态 ， 而 不 是 像 Vessel 示例 那样 使 用 继承 。 





在 代码 中 ， 对 象 组 合 可 以 表现 为 实例 化 为 男 一 个 对 象 属性 的 新 对 象 ， 这 通常 在 男 一 个 对 象 
的 构造 函数 中 实现 ， 例 如 Range 的 构造 函数 中 的 this.oven = new oven (而 不 是 从 Range 继 
节 Oven )。 


18.6 ”类 定义 


一 般 来 说 ， 编 程 可 以 分 为 两 部 分 : 定义 和 使 用 。 在 本 节 中 ,我们 定义 每 个 类 ， 来 展示 OOP 
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的 原则 。 在 需要 解释 的 地 方 会 讨 加 一 些 注 释 。 


每 个 类 将 放 在 一 个 单独 的 JavaScript 文件 中 。 例 如 ，Range 放 在 .rangejs 中 ，ingredient 则 
放 在 ./ingredient.js 中 。 主 应 用 程序 使 用 关键 字 import 和 export 来 包含 它们 。 


在 检查 完 所 有 的 类 定义 之 后 ， 我 们 将 实现 它们 。 














18.6.1 print.js 


由 于 console. log 这 个 名 字 有 点 复杂 ， 因 此 将 该 阻 数 重合 名 为 简单 的 print。 这 可 以 使 余 
下 的 代码 更 加 美观 ， 如 代码 清单 18-1 所 示 。 


代码 清单 18-1 将 console.log 简化 为 print 


001| // 将 console.log 重 写 为 print 

002, const print = (message) => console.\log(message); 
003 
004 export default print; 














我 们 对 本 地 方法 window.print 进行 了 重 写 ,但 在 该 应 用 程序 中 ， 我 们 并 没有 使 用 它 ， 这 
让 代码 更 加 容易 理解 。 


18.6.2 Ingredient 


Ingredient 类 的 定义 如 代码 清单 18-2 所 示 。 





代码 清单 18-2 定义 Ingredient 类 


001| export default class Ingredient { 

002 constructor(name, type, calories) { 
003 this.name = name,; 

004 this.type = type; 

005 this.calories = calories,; 

006 this.minutes = { 

BE fried: 0， 

008 boiled: 0， 

009 baked: 0 

010 + 

Ol } 

012 // 静态 类 型 ( 像 Ingredient.fruit 那 样 使 用 ) 
9 static meat = 0; 

014 static vegetable = 1; 

015 Static trunt = 2 

016 static egg = 3; 
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ep 
018 
Q19 
020 
1 
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static sauce = 4; 
static grain = 
static cheese = 6; 
static spice = 7; 


}; 


18.6.3 FoodFactory 


如 代码 清单 18-3 所 示 ，FoodFactory 类 将 帮助 我 们 创建 Ingredient 对 象 的 唯一 实例 。 


代码 清单 18-3 ”定义 FoodFactory 类 


Ue 
002 
003 
004 
005 
006 
007 
008 
G9 
010 
Gal 
QL2 
3 





Imoor tm me om orl To. 
import Ingredient from "./ingredient.js"; 


export default class FoodFactory { 
// 空 构造 函数 
// 我 们 不 会 在 这 里 实例 化 任何 对 象 2 
coOnstructeorC ET 


}; 
// 该 串 数 将 创建 一 个 新 的 对 象 实例 


FoodFactory .make = function(what) { 


return new Ingredient(what.name, what.type, what.calories); 


es 


18.6.4 Fridge 


Fridge 类 很 镜 单 。 它 使 用 了 数组 的 蜗 阶 函数 fiLter， 如 代码 清单 18-4 所 示 。 


代码 清单 18-4 定义 Fridge 类 


og 
002 
003 
004 
gg0s 
006 


008 
909 





export default class Fridge 1 
constructor(ingredients) { 
this.items = ingredients,; 
// 获取 所 有 类 型 的 原料 
get(type) 苹 


} 
}; 


你 可 以 在 冰箱 中 放 入 Ingredient 类 型 的 对 象 数 组 。 只 想 吃 蔬菜 ? 没 问题 ! 你 
代码 清单 18-5 所 示 的 调用 。 


只 需 执 行 如 
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代码 清单 18-5 ”实例 化 蔬 沫 
001| // 将 所 有 可 用 的 原料 存储 在 数组 中 


002 const 1ngredients = [ water, olive_oil, broth, red_wine, 
003 bay_leaf, peppercorn, beef, chicken, bacon, pineapple, 
004 apple, blueberry, mushroom, carrot, potato, egg, cheese, 
005, Sauce, oatmeal, rice, brown_ricel]; 

O006 
007| // 创建 冰箱 ， 并 将 原料 放 进 去 

008 , let Frigidaire = new Fridge(ingredients); 
009 
010| // 只 从 冰箱 中 取出 蔬菜 

011| Let vegetables = Frigidaire.get(Ingredient.vegetable); 
012 
013| console. log(vegetables); 





如 代码 清单 18-6 所 示 ， 在 控制 台 输 出 中 ， 我 们 得 到 一 个 只 且 亲 的 数组 。 


代码 清单 18-6 ”控制 台 输 出 
v (3) [Ingredient, Ingredient, Ingredient] 
p00: Ingredient {name: "mushroom", type: 2, calories: 4, minutes: {..}} 
>1: Ingredient {name: "carrot", type: 2, calories: 41.35, minutes: {..}} 
>*2: Ingredient {name: "potato", type: 2, calories: 163, minutes: {..}} 
length: 3 


> | 














18.6.5 convert energy to heat 
我 们 来 定义 将 能 量 转换 为 热量 的 核心 水 数 ， 如 代码 清单 18-7 所 示 。 


代码 清单 18-7 定义 convert energy to heat 函数 


QOD TMior er me rom Sprime ee. 

002 import { RangeType } from "./range.Js"; 

003| // 根据 灶具 实现 来 返回 能 量 

004 | const convert_energy_to_heat = function(source_type, minutes) 
onl 

006 let energy = 0; 

hy // 由 于 加 热 阶段 较 长 ， 因 此 产生 的 能 量 较 少 


008 if (source_type == RangeType.Electric) energy = 1; 
009|  // 产生 更 多 的 能 量 (更 高 效 ) 

010| if (source_type == RangeType.Gas) energy = 2; 

oe let E = energy * minutes ; 


012 print( Range generated S${E} unit(s) of energy. ); 
013| // 返回 产生 的 能 量 
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014 return energy * minutes ; 
OLB NS 

016 
0 A 

018 const convert = convert_energy_to_heat ; 





1. 推测 


如 示例 所 示 ， 电 炉 产 生 的 能 量 比 煤气 灶 大 约 低 50%。 这 当然 只 是 推测 。 如 果 有 实际 的 设备 ， 
可 以 根据 实际 情况 下 的 精确 数字 来 修改 该 晒 数 。 


2. 分 开 实 现 














这 个 子 数 很 重要 ， 因 为 它 是 灶具 实现 的 核心 。 如 果 改 变 这 个 函数 的 内 部 工作 方式 ， 那 么 主 
类 API 并 不 会 受到 影响 。 这 意味 看 从 RangeType.Gas 升级 到 RangeType.Electric， 我 们 无 须 
重 写 代码 的 任何 部 分 ! 


如 条 遵 循 OOP 原则 ， 就 可 以 实现 这 一 点 。 当 然 ， 使 用 其 他 相似 的 模式 或 逻辑 结构 也 能 够 模 
拟 实 现 。 但 是 ， 这 通常 出 现在 OOP 中 。 
18.6.6 Vessel 

体现 对 象 继承 的 类 只 有 VesseL。 先 介绍 一 下 其 构造 图 数 的 定义 ， 如 代码 清单 18-8 所 示 。 
代码 清单 18-8 ” Vessel 类 的 构造 函数 

003| // 定义 襄 乌 炊具 


004 export defauLt class Vessel { 
005 constructor(material, type) 1 





006 this.type = type; 

go this.material = material; 

008 this.ingredients = [|]; 

009 print( Created Sthnsematernalb Sithis typel, ), 
010 } 





calories 方法 将 使 用 reducer 来 计算 炊具 中 当前 的 总 卡路里 数 ( 见 代 码 清单 18-9 )。 
代码 清单 18-9 ”calories 方法 


加 下 下 calories() 

012 const reducer = (acc, iing) => acc + iing.calories,; 
013 let sum = this.ingredients.reduce(reducer, 0); 
014 print( There are S$S{sum} calories in 

015 $s{this.material} ${this.type}. ); 

016 } 
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add 方法 可 以 加 炊具 中 添加 一 种 原料 〈 见 代码 清单 18-10 )。 
代码 清单 18-10 ”add 方法 


Oa add(ingredient) { 

018 this.ingredients.push(ingredient); 

019 print( Added $s{ingredient.name} to 

020 $s{this.material} S${this.type}. ); 
加 2 由 





cook 方法 可 以 对 炊具 中 的 原料 进行 训 调 ( 见 代 人 码 清 单 18-11 )。 
代码 清单 18-11 ”cook 方法 


022 cook() { 

02 console.log( Cooking in ${this.material} ${this.type}. ); 
024 } 

025 | }; // 关闭 默认 的 导出 类 Vessel 


我 们 根据 Vessel 扩展 Pan、Pot 和 Tray。 请 注意 ， 每 当 从 父 对 和 象 扩展 对 象 时 ， 虱 必须 通 
过 super 来 调用 父 对 和 象 的 超级 构造 函数 ( 见 代码 清单 18-12 )。 


代码 清单 18-12 使 用 super 方法 来 调用 父 对 和 象 的 超级 构造 浮 数 








027| class Pan extends Vessel | 

028 constructor (material) { 

029 super(material, "frying pan"); 
030 } 

2 

U3 

033 ,class Pot extends Vessel { 

034 constructor(material) { 

035 super(material, "cooking pot"); 
036 } 

O39 

038 

039 class Tray extends Vessel 1{ 

040 constructor(material) { 

041 super(material, "baking tray"); 
042 } 

043| 1); 











子 类 Pan、Pot 和 Tray 继承 了 Vessel 类 的 所 有 默认 功能 。 我 们 并 未 添加 这 些 类 自 有 实 
现 的 代码 ! 最 后 如 代码 清单 18-13 所 示 ， 导 出 Pan、Pot 和 Tray。 请 注意 ， 实 际 上 无 须 导 出 
Vessel 本 身 ， 因 为 这 是 主要 的 抽象 类 ， 提 供 默 认 的 实现 ， 而 它 在 其 他 地 方 并 不 直接 使 用 。 
代码 清单 18-13 ”导出 类 

045 export { Vessel, Pan, Pot, Tray }; 
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18.6.7 Burner 


Burner 类 如 代码 清单 18-14 所 示 。 


代码 清单 18-14 定义 Burner 类 


gon 
002 
QQ 
004 
OOs 
006 
00m 
008 
909 
O010 
Oil 
012 
Oe: 
014 
ULs 
016 
0 
018 
QL3 





export const BurnerIndex = { UpperLeft: 0, UpperRight: 
LowerLeft: 2, LowerRight: 


export default class Burner { 
Comnstruetor Gr 
this.id = id; 
this.state = Burner .OfTf; 
this.vessel = null; // 炉灶 上 的 炊具 
print( Created burner S${this.id} in Off state. ); 


} 
om 
this.state = Burner .On ; 
Bennett "Burner SIthnis od turned on Ys 
上 
of 
this.state = Burner .Off; 
DIECO Burner STth ses "id tared or 
} 
3 





可 以 在 类 的 内 部 使 用 static 关键 字 来 定义 静态 属性 0n 和 0ff， 这 两 个 静态 属性 直接 定义 
在 Burner 类 中 ,位 于 其 主体 的 外 部 〈 见 代码 清单 18-15 )。 


代码 清单 18-15 ”定义 静态 属性 0n 和 0ff 


yal 
002 
00903 








// 静态 标识 符 
Burner .Off = faLse; 
Burner .on = 七 FrUe ; 


18.6.8 Range 


1. 多 态 炉 


Oven 可 以 多 态 地 添加 到 Range 中 。 本 节 将 介绍 如 何 做 到 这 一 点 ， 请 看 代码 清单 18-16。 


代码 清单 18-16 ”定义 0ven 类 


001| // 添加 新 特性 bake (需要 铝 制 托盘 ) 
002 class Oven { 


0093 


OnsStructorGy 
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004 this.tray = null; 

005 六 

006 add(tray) { 

OT this.tray = tray; 

008 print( Tray with $s{this.tray.ingredients} added! ); 
009 

010 onNn() { 

Gl print("Oven turned on!"); 
O12 } 

Oe oft 

QL4 print("Oven turned off!"); 
015 } 

016 bake() { 

Oy DFTnme "Oven bakKes 
018 } 

019| }; 





Range 类 有 一 些 依赖 项 . print、Burner、BurnerIndex 和 convert。 从 各 个 源 文件 中 导 
入 它们 ， 如 代码 清单 18-17 所 示 。 


代码 清单 18-17 导入 Range 类 的 依赖 项 


DoT mor co or mt or om /rm 

002 import { Burner, BurnerIndex, convert } from "./burner.J]s"; 
oS 
004 const RangeType = 1 

005 ELectrie "ELeectric., 
006 Gas: "Gas" 

von 


接 下 来 定义 Range 类 。Range 类 是 整个 就 饪 系统 的 核心 。 它 将 所 有 的 类 连接 为 一 个 炊具 机 。 
如 代码 清单 18-18 所 示 ， 我 们 定义 新 类 Range， 并 导出 。 


代码 清单 18-18 定义 Range 类 


001| export default class Range { 











Range 的 构造 阴 数 如 代码 清单 18-19 所 示 。 


代码 清单 18-19 ”Range 类 的 构造 函数 
a03 constructor(type, stove) { 


O004 

005 // 默认 未 安装 烤箱 
006 this.oven = null; 
0 
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008 // RangeType.ELectric 红 RangeType.Gas 

009 this.type = type; 

010 

加 证 rr RE 

012 this.burners = [new Burner(BurnerIndex.UpperLeft), 
013 new Burner(BurnerIndex.UpperRight), 
者 new Burner(BurnerIndex.LowerLeft), 
015 new Burner(BurnerIndex.LowerRight) ] ; 
016 

yy 1if (type == RangeType.Electric) { 

018 // RangeType.Electric 加 热 和 冷 

019 // 却 所 需 时 间 更 长 ， 使 其 效率 更 低 ， 控 

020 // 制 更 困难 ， 操 作成 本 更 高 ， 安 装 成 本 

yl A 

022 } 

2 if (type == RangeType.Gas) { 

024 // RangeType,Gas 一 一 加 热 速 度 更 快 ， 

025 // 无 须 冷 却 时 间 ， 使 其 更 高 效 ， 更 易于 

026 // 控制 ， 操 作成 本 更 低 ， 安 装 成 本 更 高 

O27 ， 

028 

029 consoLe .Log( Created $s{type} rangel ); 

030 lL 


在 构造 函数 中 ， 我 们 向 Range 对 象 添加 了 4 个 新 的 灶 眼 。 这 就 是 多 态 ( 由 其 他 对 象 组 成 
一 个 对 象 )。 在 该 示例 中 ，Range 由 4 个 独立 的 Burner 对 象 组 成 。 在 这 里 ， 使 用 继承 就 没有 
什么 意义 了 。 如 何 从 灶 眼 “继承 ” 灶 台 或 从 灶 台 “继承 ” 灶 眼 呢 ? 这 没有 逮 辑 意义 。 在 这 里 ， 
Burner 是 Range 对 象 的 一 部 分 ， 这 似乎 更 准确 地 反映 了 现实 中 事物 的 组 成 方式 。 


2. Range.install oven 





随后 ， 我 们 可 以 调用 install oven， 来 安装 多 态 烤 箱 ( 见 代码 清单 18-20 )。 
代码 清单 18-20 ”对 象 组合 


032 install_oven() { 

oe // 多 态 实 践 : 对 象 组 合 

034 // 我 们 将 另 一 个 关键 对 象 添加 到 Range 中 
035 this.oven = new Oven(); 

036 print("Installed oven!"); 

03 





3. Range.place(index, vessel) 


Range.place 方法 被 用 于 将 现 有 的 Vessel 对 象 放 在 4 个 可 用 的 灶 眼 上 ， 如 代码 清单 18-21 
所 示 。 
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代码 清单 18-21 将 炊具 放 在 灶 眼 上 





039 // 将 炊具 放 在 4 个 灶 眼 上 

040 place(index, vessel) { 

Oa this.burners[index] .vessel = vessel; 

042 print( Placed S${vessel.material} S${vessel.typel} 
043 on range index S${index}. ); 

044 } 





4. Range.run(minutes) 


假如 使 用 上 述 的 Range.place 方法， 将 炊具 放 在 一 个 或 多 个 灶 眼 上 ， 那 么 我 们 现在 可 以 调 
用 Range.run(1)， 指定 操作 灶 台 的 分 钟 数 ， 如 代码 清单 18-22 所 示 。 


代码 清单 18-22 ”打开 灶 台 











ol // 打开 灶 台 ， 将 能 量 转换 为 每 个 灶 眼 的 热量 
002 run(minutes) { 
003 // 1. 将 能 量 转 换 为 热量 
004 this.burners.forEach(item => convert(this.type, minutes)); 
005 // 2. 对 炊具 调用 cook 
006 this.burners.forEach(item => 
je // 首先 检查 灶 眼 上 是 否 有 炊具 
008 // 如 果 有 ， 则 执行 cook 
009 // 否则 不 执行 任何 操作 
010 item.vessel ? item.cook() : null); 
Ol . 
18.7 ”组 浅 


定义 好 了 所 有 类 ， 现 在 开始 做 饭 了 ! 
如 代码 清单 18-23 所 示 ， 将 所 有 的 依赖 项 添加 到 主 JavaScript 文件 中 。 
代码 清单 18-23 ”导入 依赖 项 


001| import Ingredient from "./ingredient.jJs"; 

002 | import Fridge from "./fridge.J]s"; 

003 | import { Burner，BurnerIndex } from "./burner .]js"; 

004 import { Range, RangeType } from "./range.]js"; 

005| import { Vessel, Pan, Pot, Tray } from "./cookware.]jJs"; 
006 import FoodFactory from "./foodfactory.J]s"; 














这 里 需要 注意 的 一 点 是 ， 我 们 无 须 将 print 图 数 从 .print,js 文件 导入 到 主 程 序 中 ， 它 是 灶 
台 实 现 的 内 部 图 数 。 在 继续 操作 之 前 ， 首 先 定 义 如 代码 清单 18-24 所 示 的 变量 。 
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代码 清单 18-24 创建 Ing 引用 
001| Let Ing = Ingredient; 


单词 Ingredient 太 长 了 。 本 书 中 并 未 出 现实 例 化 这 种 类 型 的 对 象 的 语句 。 这 在 随后 的 源 
代码 中 可 以 看 出 来 。 因此， 我 们 创建 了 一 个 名 为 Ing 的 引用 。 


回忆 一 下 变量 名 是 如 何 引 用 原始 对 象 的 。Ing 变量 是 对 与 Ingredient 完全 相同 的 构造 天 
数 的 引用 , 不 会 创建 副本 。 在 后 文 的 代码 中 , 我 们 将 创建 Ingredient 类 的 实例 , 作为 实际 成 分 。 


Ingredient 构造 旺 数 有 name 、type 和 calories 三 个 参数 。 可 以 在 谷歌 上 查询 每 种 食物 
的 卡路里 。 











18.7.1 定义 成 分 
请 看 代码 清单 18-25。 
代码 清单 18-25 ”定义 成 分 
003|1 // 术 、 橄 榄 油 、 肉 汤 、 红 酒 


004| const water = new Ing("water", Ing.liquid, 0); 
0Q05| Const olive oil = new TIng("olive oil", Ing: liquid, 07: 
006| const broth = new Ing("broth", Ing.liquid, 11); 


007| const red wine 
008| // 调料 

009| const bay_leaf = new Ing("bay leaf", Ing.spice, 6); 
010| const peppercorn = new Ing("peppercorn", Ing.spice, 17); 


OBE25 


new Ing("red wine", Ing.liquid, 125); 


012 |, const beef = new Ing("beef", Ing.meat, 213); 

013| const chicken = new Ing("chicken", Ing.meat, 335); 

014| const bacon = new Ing("bacon", Ing.meat, 43); 

es 

016| const pineapple = new Ing("pineapple", Ing.fruit, 452); 
017| const apple = new Ing("apple", Ing.fruit, 95); 

018| const blueberry = new Ing("blueberry", Ing.fruit, 85); 
ep 

020| const mushroom = new Ing("mushroom", Ing.vegetable, 4); 
O22neenst earrotk = new Ing("carrot", Ing.vegetable, 41.35); 
022| const potato = new Ing("potato", Ing.vegetable, 163); 
023| const pepper = new Ing("bell pepper", Ing.vegetable, 24); 
024| const onion = new Ing("onion", Ing.vegetable, 44); 

025| // 鸡蛋 

026| const egg = new Ing("egg", Ing.egg, 78); 

027| // 谷物 、 奶 酷 、 调 味 汗 

028| const oatmeal = new Ing("oatmeal", Ing.grain, 158); 


029| const rice “new Ine( rice In rann 206); 
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030| const brown_rice = new Ing("brown rice", Ing.grain, 216); 
031| const cheese = new Ing("cheese", Ing.cheese, 113); 
032| const sauce = new Ing("tomato sauce", Ing.sauce, 70); 





18.7.2 ”实例 化 灶 台 对 象 
创建 电炉 ， 如 代码 清单 18-26 所 示 。 
代码 清单 18-26 ”创建 电炉 


001| // 创建 电炉 
002| let range = new Range(RangeType.Electric); 


这 样 一 来 ,下 一 次 执行 Range. run(1) 时 ,我 们 就 可 以 将 所 有 放 在 炉子 上 的 食材 及 任 1 分钟。 
但 在 此 之 前 ， 首 先 需 要 创建 一 些 京 饪 炊 上 其 ， 并 在 里 面 放 一 些 原 料 。 


创建 好 了 灶 台 ， 现 在 我 们 来 创建 训 饪 炊具 吧 ! 请 看 代码 清单 18-27。 
代码 清单 18-27 创建 炊具 
001| // 创建 类 有 具 


002 let pan = new Pan("cast 1ron"); 

003 | let skillet = new Pan("cast iron'" ) ; 
004 ' let pot = new Pot("stainless steel"); 
005| Let tray = new Tray("aluminum"),; 


如 代码 清单 18-28 所 示 ， 我 们 将 一 些 原料 放 进 pot 中 ,准备 炖 牛肉 。 
代码 清单 18-28 ” 炖 牛肉 


000// 和 内 

002 pot.add (water); 

oopoc add( oro 

004 pot.add(red_wine); 

005 pot.add(beef); 

006 pot.add(potato); 

Ooo a eames 

008 pot.add(bay_leaf); 

009 pot.add(peppercorn); 

010 pot.calories(); // 576.35 





























但 这 里 存在 一 个 问题 。 由 于 JavaScript 将 变量 看 作对 同一 个 对 象 的 引用 ， 因 此 ， 如 采 将 水 、 
肉 汤 、 牛 肉 等 加 入 到 另外 一 个 锅 中 ， 那 么 本 质 上 这 次 的 原料 与 上 面 锁 中 的 原料 是 同一 组 。 这 意 
味 春 如 果 打 开 和 炉灶， 我 们 可 能 是 在 不 同 的 炊具 中 有 划 饪 同一 组 原料 ! 这 就 需要 工厂 类 。 


如 代码 清单 18-29 所 示 ，FoodFactory 类 将 返回 原料 的 新 实例 ， 而 不 是 对 现 有 原料 对 象 实 
例 的 引用 (要 理解 FoodFactory 类 的 工作 方式 ， 请 参见 它 的 实现 )。 








178 第 18 章 面向 对 象 编程 


代码 清单 18-29” 炖 蔬菜 


001 skillet.add(FoodFactory.make (mushroom)); 
002 skillet.add(FoodFactory.make(carrot)); 
003 skillet.add(FoodFactory.make(onion)); 
004 skillet.add(FoodFactory.make(potato)); 
005 skillet.add(FoodFactory.make(pepper)); 
006 skillet.calories(); // 2260 





FoodFactory 用 来 确保 所 有 的 原料 都 是 唯一 的 对 象 实例 ( 见 代码 清单 18-30 )。 
代码 清单 18-30 ”前 鸡蛋 


Uo 

002, pan.add(FoodFactory.make (egg)); 
003| pan.add(FoodFactory.make (egg)); 
004 pan.add(FoodFactory .make(egg) ) ; 
005 pan.calories(); // 234 





现在 ， 如 代码 清单 18-31 所 示 ， 我 们 将 所 有 的 炊具 都 放 到 炉灶 上 。 


代码 清单 18-31 将 锅 放 到 炉灶 上 
001| // 将 炖 牛肉 的 锅 放 到 左下 的 灶 眼 上 


002 range.pLace(BurnerIndex.LowerLeft，pot) ; 
003 
004  // 将 炖 蔬菜 的 锅 放 到 右 下 的 灶 眼 上 

005, range.place(BurnerIndex.LowerRight, skillet); 
006 
007| // 将 艺 3 个 鸡蛋 的 锅 放 到 右上 的 灶 眼 上 

008 | range.pLace(BurnerIndex.UpperRight，pany) ; 





然后 打开 炉灶 ， 如 代码 清单 18-32 所 示 。 
代码 清单 18-32 ”打开 炉灶 


QO 

002 range.burners[BurnerIndex.LowerLeft].on(); 
003 | range.burners[BurnerIndex.LowerRight] .on(); 
004 ,range.burners[BurnerIndex.UpperRight].on(); 





最 后 ， 让 炉灶 工作 1 分钟， 如 代码 清单 18-33 所 示 。 
代码 清单 18-33 ” 享 饪 1 分 钟 


001| // 让 所 有 打开 的 炉灶 工作 1 分 钟 
002| range.run(1); 








事件 是 在 特定 动作 发 生 时 执行 的 操作 。 如 果 用 户 单 击 UI 按钮 或 其 他 的 HTML 元素 ， 浏 览 
器 将 发 送 一 个 与 单 击 的 HTML 元 素 相 关联 的 onclick 事件 。 


事件 分 为 两 种 类 型 : 浏览 器 事件 和 合成 事件 。 


19.1 浏览 器 事件 

内 置 的 浏览 旧事 件 是 预 设 好 的 ， 并 且 在 动作 发 生 时 ， 由 浏览 絮 执 行 。 我 们 无 须 自 己 创 建 ， 
只 需要 拦截 它们 (假设 希望 在 事件 发 生 后 执行 其 他 操作 )。 当 浏览 各 的 窗口 大 小 发 生 改 变 时 ,会 
自动 发 送 resize 事件 。 这 或 许 是 调整 UI 布局 来 适应 新 区 域 的 最 佳 位 置 。 

鼠标 事件 也 是 内 置 的 浏览 喜事 件 之 一 。 当 鼠标 移动 时 ， 就 会 发 送 onmousemove 事件 ,不 靳 
地 重新 计算 鼠标 的 位 置 ， 并 通过 event.cLientX 属性 和 event.clientY 属性 来 表示 鼠标 位 置 。 
当 按 下 鼠标 时 ， 将 触发 onmousedown 事件 ， 而 当 松 开 鼠 标 时 ， 将 触发 onmouseup 事件 。 你 可 
以 拦截 这 些 事 件 ， 并 提供 回调 也 数 ， 其 中 包含 事件 发 生 后 要 执行 的 命令 。 这 对 于 实现 自 定义 的 
UI 体验 非常 有 用 ， 如 单 击 鼠 标 时 显示 自 定义 的 菜单 。 


19.2 合成 事件 

内 置 的 浏览 器 事件 很 好 ， 而 要 真正 理解 它们 的 工作 方式 ， 需要 先 了 解 合 成 事件 。 这 会 让 我 
们 很 好 地 理解 JavaScript 如 何 创 建 和 调度 事件 。 
19.2.1 事件 对 象 


可 以 使 用 事件 对 象 来 创建 和 调度 自己 的 事件 。 以 这 种 方式 创建 的 事件 称 为 合成 事件 ， 这 是 
因为 它们 并 不 是 由 浏览 絮 本 身 生 成 的 ， 而 是 由 程序 生成 的 。 我 们 创建 一 个 合成 事件 ， 来 看 一 下 
JavaScript 中 事件 的 基本 工作 方式 ， 如 代码 清单 19-1 所 示 。 
代码 清单 19-1 创建 自 定义 事件 


001|// 创建 新 的 自 定义 事件 startEvent 
002| tet startEvent = mew Event( "start”); 
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创建 了 startEvent 之 后 ， 我 们 需要 拦截 它 ， 并 在 检测 到 该 事件 时 运行 一 些 代码 。 要 监听 
start， 首 和 完 要 调用 addEventListener 方 法， 并 将 该 方法 的 第 一 个 参数 设 为 start， 如 代码 
清单 19-2 所 示 。 
代码 清单 19-2 ”监听 事件 

004 1// 监听 start 事 件 


005 document .addEventListener('start ' ， 
006 function ( event ) { /x* 自 定 义 代 码 */ },， false)，) 


事件 发 生 时 将 执行 一 个 匿名 回调 函数 ， 该 函数 接受 event 参数 。 虽 然 该 参数 可 以 任意 命名 ， 
但 是 通常 命名 为 event， 因 为 这 样 更 直观 。 








19.2.2 事件 捕获 与 事件 冒 泡 


addEventListener 方法 的 最 后 一 个 参数 useCapture 设 为 false， 以 禁用 事件 捕获 模式 。 
一 般 来 说 ， 当 设 为 true 时 ， 意 味 厦 父 元 系 将 先 收 到 事件 通知 ， 然 后 才 是 实际 单 击 的 元 系 。 如 果 
设 为 false， 则 使 用 事件 冒 泡 模式 ， 其 情形 与 事件 捕获 模式 相反 ， 单 击 的 元 系 先 收 到 事件 通知 ， 
然后 事件 逐步 被 发 送 给 其 所 有 的 父 元 素 。 


这 可 以 追溯 到 Netscape Navigator 浏览 如 和 Internet Explorer 早期 版 本 的 实现 。 简 单 地 说 ， 
Netscape Navigator 希望 强制 执行 事件 捕获 ， 而 Internet Explorer 想 要 强制 执行 事件 骨 泡 ， 最 终结 
果 是 共用 这 两 种 模式 。 


由 此 开始 ，addEventListener 会 同时 监听 捕获 和 冒 泡 。 最 后 一 个 参数 useCapture 使 程 
序 员 可 以 自己 选择 事件 传播 模式 ， 如 图 19-1 所 示 。 














捕获 冒 泡 
button > div > body body > div > button 


图 19-1 “事件 捕获 与 事件 冒 泡 
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在 现代 浏览 硕 中 ， 如 果 末 指定 useCapture 参数 ， 则 默认 为 fatse， 而 之 前 的 浏览 硕 则 要 
求 手 动 设置 该 标志 。 因 此 ， 在 现代 JavaScript 中 ， 它 通常 被 显 式 地 设置 为 false， 仪 同 后 兼容 。 





19.2.3 dispatchEvent 


执行 addEventListener 之后， 浏览 帮会 持续 监听 start 事件 是 否 发 生 。 但 在 使 用 
dispatchEvent 方法 实际 触发 事件 之 前 ， 回 调 将 保持 休 眼 状态 〈 见 代码 清单 19-3 )。 
代码 清单 19-3 ”触发 事件 


008 // 触发 start 事 件 
009|document.dispatchEvent( startEvent ); 


Vp 
尝 
半 
Hl 


dispatchEvent 方法 会 实际 触发 我 们 上 自 定 义 的 start 事件 。 它 通常 持 有 一 个 
指 癌 前 面 创建 的 实际 的 事件 对 象 。 





19.2.4 removeEventListener 


事件 监听 会 占用 内 存 ， 如 果 同 时 监听 的 事件 过 多 ， 就 会 影响 程序 的 性 能 。 如 果 我 们 不 再 和 需 
要 监听 事件 ， 那 么 最 好 调用 removeEventListener 方法 。 


如 代码 清单 19-4 所 示 ， 假 设 我 们 开始 监听 文档 的 cLick 事件 。 
代码 清单 19-4 监听 cLick 事件 


001| docunent. addEvVentListener ("euiek™, callback).: 





要 移 除 对 该 事件 的 监听 ， 就 必须 提供 最 开始 传递 给 addEventListener 方法 的 回调 函数 
( 见 代 码 清单 19-5 )。 


代码 清单 19-5 移 除 click 监听 事件 

001| document.removeEventListener ("click", callback); 

由 于 匿名 晒 数 不 能 用 来 移 除 事件 监听 ， 因 此 代码 清单 19-6 将 不 会 移 除 事件 监听 。 
代码 清单 19-6 ”匿名 羡 数 不 能 用 来 移 除 事件 监听 


001| document.removeEventListener("click", function() { }); 





每 当 使 用 匿名 也 数 表达 式 时 , 它 都 会 开辟 一 块 狐 内 存 空间 。 这 意味 者 removeEventListener 
将 无 法 在 已 经 存在 的 回调 中 找到 它 。 之 所 以 需要 原始 的 回调 函数 名 ， 是 因为 它 在 内 存 中 的 位 置 
是 唯一 的 。 这 使 得 removeEventListener 方法 能 够 确切 地 知道 要 解 绑 哪 一 个 监听 需 。 








请 注意 ，removeEventListener("click") 并 不 会 移 除 “所 有 的 单 击 事件 >。 同样 ， 必 须 
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指定 removeEventListener 的 第 2 个 参数 ， 即 绑 定 事件 的 原始 晒 数 名 ， 才 能 成 功 解 绑 事件 。 


19.2.5 ”CustomEvent 对 象 








事件 可 以 携带 附加 数据 ， 指 定 事件 的 详细 信息 。 如 果 单 击 鼠 标 ， 我 们 需要 知道 鼠标 指针 当 
时 的 式 轴 和 了 了 轴 的 坐标 位 置 。 如 果 调 整 了 浏 览 硕 的 大 小 ， 我 们 需要 知道 新 客户 端 区 域 的 大 小 。 
我 们 应 该 使 用 CustomEvent 对 象 ， 以 向 事件 添加 详细 信息 。 先 来 创建 负载 对 象 。 该 对 象 必 须 持 
有 detail 属性 ， 来 存储 上 自 定 义 事件 相关 的 附加 信息 表示 大 头 针 放 置 在 地 图 上 的 位 置 和 信 
息 标 签 ， 如 代码 清单 19-7 所 示 。 
代码 清单 19-7 创建 事件 的 详细 负载 

001 1// 创建 事件 的 详细 负载 
002 let info = { 
003 We 本 apDosTETOmR li2s 2210 


004 info: "map location" } 
Os 


现在 ， 我 们 创建 新 的 目 定 义 pin 事件 ， 如 代码 清单 19-8 所 示 。 
代码 清单 19-8 创建 pin 事件 
0071// 创建 自 定 义 类 型 的 新 事件 pin 


008 let eventPin = new CustomEvent("pin", 1nfo); 














如 代码 清单 19-9 所 示 ， 回 调 函 数 将 在 发 送 事 件 时 被 触发 。 


代码 清单 19-9 ”创建 回调 也 数 


010 // 创建 回调 水 数 

gilet callback = funcetion(event)y 
012 console. log(event); 

ee 


最 后 ， 开 始 监听 pin 事件 ， 如 代码 清单 19-10 所 示 。 
代码 清单 19-10 ”监听 pin 事件 
015|// 开始 监听 pin 事 件 


016|document.addEventListener("pin"，caLLback) ; 





与 一 般 的 事件 一 样 ， 自 定义 事件 也 调用 dispatchEvent 方法 来 触发 。 


每 当 在 地 图 区 域 点 击 鼠 标 时 ， 就 可 以 使 用 dispatchEvent 方法 来 触发 pin 事件 〈 见 代 三 清 
单 19-11 )。 
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代码 清单 19-11 触发 pin 事件 
018 // 手动 触发 该 事件 


019|document.dispatchEvent(eventPin); 
1. 事件 解析 
我 们 在 控制 台 上 看 一 下 CustomEvent。 图 19-2 突出 显示 了 其 中 的 重要 部 分 。 


CustomEvent 

| 
bubbles: false 
cancelBubble: false 
cancelable: false 
composed: false 
currentTarget: null 
defaultPprevented: false 






CustomEvent.detall 







eventPhase: 9 
isTrusted: false 





传播 路 径 
returnValue: true 
pb srcElement: document 


目标 元 素 





timeSstamp: 261.57999999355525 





目 定 义 事件 名 
> proto : CustomEvent 
> 
图 19-2 事件 解析 
2. 小 结 


事件 对 象 是 抽象 的 。 每 个 事件 通常 都 持 有 与 事件 类 型 相关 的 详细 人 信息。 因此， 在 设计 自己 
的 事件 时 ， 请 考虑 它 应 该 提供 什么 类 型 的 数据 。 这 通 沼 取决 于 程序 用 途 。 








19.2.6 setTimeout 

setTimeout 函数 可 以 用 来 为 事件 计时 。 创 建 回调 函数 ， 如 代码 清单 19-12 所 示 。 
代码 清单 19-12 ”创建 回调 函数 

oe callback = function() { console.log("event!") }; 


如 代码 清单 19-13 所 示 ， 在 调用 setTimeout 1 秒 (1000 毫秒 ) 后 执行 回调 晒 数 。 
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代码 清单 19-13 ”1000 毫秒 后 调用 回调 函数 
002| setTimeout(caLLback ， 1000 ) ; 





我 们 再 试 一 下 其 他 的 方法 ( 见 代 码 清 单 19-14 )。 


代码 清单 19-14 ”创建 回调 函数 


001|Let callback = function() {{ 
002 console.log("do something"); 
00 吾 县 


如 代码 清单 19-15 所 示 ， 在 1000 毫秒 之 后 执行 回调 函数 。 
代码 清单 19-15 ”1000 毫秒 后 调用 回调 函数 
005|Let timer = setTimeout(callback, 1000); 
使 用 clearTimeout 国 数 来 重 置 超时 ， 这 会 取消 事件 并 防止 它 再 次 发 生 ( 见 代码 清单 19-16 )。 


代码 清单 19-16 ” 重 置 超时 
0071// 重 置 超时 


008 clearTimeout(timer); 
009 timer = null; 





19.2.7 setInterval 

setInterval 也 数 的 工作 方式 与 setTimeout 几乎 完全 相同 ， 只 是 它 将 按 第 2 个 参数 中 指 
定 的 时 间 间 隔 持 续 执 行 回 调子 数 ， 如 代码 清单 19-17 所 示 。 
代码 清单 19-17 每 隔 1000 毫秒 调用 一 次 回调 函数 

011 Let interval = setInterval(callback, 1000); 


clearInterval 图 数 可 以 用 来 停止 事件 〈 见 代码 清单 19-18 )。 


代码 清单 19-18 重 置 时 间 间 陋 
013 1// 重 置 时 间 间 陋 


014 clearIinterval(interval); 
0l5linterval = null; 








19.3 ”拦截 浏览 器 事件 


许多 内 置 事件 已 持 有 附加 到 全 局 窗口 对 象 的 回调 函数 。 这 童 味 着 可 以 通过 日 己 的 实现 来 履 
蓄 它 们 ， 如 代码 清单 19-19 所 示 。 





代码 清单 19-19 履 盖 窗口 对 象 的 事件 


001 | window.onload = function(event) { } 

002 window.onresize = function(event) { } 
003 | window.focus = function(event) { } 

004 window.onmousemove = function(event) { 上 
005 Window.onmouseover = function(event) { 上 
006 window.onmouseout = function(event) { } 





这 些 事 件 仍 会 发 生 ， 但 除了 内 置 代码 之 外 ， 附 加 到 事件 的 函数 也 会 被 执行 。 

不 过 ， 事 件 并 不 是 只 可 以 在 窗口 对 象 中 被 覆盖 。 例 如 ， 你 还 可 以 将 事件 直接 附加 到 HIML 
元 素 ， 此 时 大 选择 的 元 素 支 持 特 定 的 事件 类 型 ， 那 么 该 事件 将 被 覆盖 ( 见 代 人 码 清单 19-20 )。 
代码 清单 19-20 ”和 窗 产 HTML 元 系 的 事件 


001|document .getELementById("1d") .onclick = function(event) { 
002 console. log(event); 
003|} 








19.4 显示 鼠标 位 置 





要 显示 鼠标 指针 位 于 元 素 内 或 相对 于 整个 页 面 的 位 置 ， 可 以 拦截 onmousemove 事件 ， 并 输 
出 附加 到 event 参数 上 的 鼠标 位 置 坐 标 ， 如 代码 清单 19-21 所 示 。 


代码 清单 19-21 拦截 onmousemove 事件 


001 window.onmousemove = function(event) { 
002|  // 获取 相对 于 文档 的 鼠标 坐标 

003 Let mousex = event.pagexX; 

004 Let mouseY = event.pageyY ; 

005 // 获取 相对 于 元 素 区 域 的 鼠标 坐标 

006 let localX = event.clientxX; 

007 let localY = event.clienty; 

008| } 











控制 台 输 出 如 图 19-3 所 示 。 





944 4 944 4 
948 6 948 6 
3352 BG S52 8 


图 19-3 ”控制 台 输 出 
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单 击 及 许多 其 他 事件 可 以 像 代 码 清单 19-22 中 这 样 进行 覆 冀 。 


代码 清单 19-22 ”和 履 羡 单 击 事件 
001| window.onclick = function(event) { /x 处 理事 件 x/ } 


19.5 








单 用 的 鼠标 事件 类 


遂 











每 次 新 项 目 需要 目 定 义 UI 功能 时 ， 虱 要 重新 编写 鼠标 代码 ， 我 已 经 数 不 清 写 了 多 少 次 了 。 
虽然 要 跟踪 何 时 单 击 按钮 只 需 拦 规 鼠 标的 移动 事件 和 单 击 事件 ， 但 是 一 般 的 UI 项目 需要 的 计算 
不 由 内 置 的 鼠标 事件 提供 。 

编写 的 目 定义 模块 需要 知道 ”用户 当 前 是 否 在 用 鼠标 拖 动 对 象 ”。 如 朱 你 正在 使 用 滑动 界面 ， 
最 需要 回答 的 问题 是 :“ 最 后 一 次 鼠标 单 击 和 当前 鼠标 位 置 之 间 的 距离 是 多 少 ? ” 


在 本 市 中 ,我们 将 编写 一 个 可 重用 的 Mouse 类 。 这 样 在 将 来 的 JavaScript 项 目 中 ， 就 无 须 



































再 编写 鼠标 代码 ， 只 要 从 mousejs 文件 中 导出 Mouse 类 就 可 以 了 ， 如 代码 清香 19-23 所 示 。 


代码 清单 19-23 ”Mouse 类 


don 
002 
Qe9e 
004 
0905 
006 
oy 
008 
009 
O010 
0 
QL12 
00 
014 
ys 
016 
0 
018 
VS 
020 
ml 
022 
25 
024 
加 有 





export class Mouse { 
constructor() { 


ee el // 当前 坐标 
this.memory = {x: 0, y: 0}; // 最 后 一 次 单 击 的 位 置 
this.difference = {x: 9，y: 0}; // 变化 
this.inverse = {x: 0, y: 0}; // 更 新 


this.dragging = false; 
document .body .addEventListener("mousedown"，() => { 
if (this.dragging == false) { 
this.dragging = true; 
this.memory.x = this.current.x; 
this.memory.y = this.current.y; 
this.inverse.x = this.memory.x; 
this.inverse.y = this.memory.y; 
b 
3 
document .body .addEventListener("mouseup"，() => { 
this.dragging = false; 
this.current.x = 0; 
this.current.y = 0; 
this.memory.x Oi 
this.memory.y ©; 
this.difference.x = 
this.difference.y = 0; 
this.inverse.x = 0;， 


| 
© 
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026 this.1nverse.y = 0; 

D2 1 

028 document.body.addEventListener("mousemove", (event) => { 
029 this.current.x = event.pagexX; 

030 this.current.y = event.pageyY ; 

O27 i (thnisedrapenme) HT 

032 this.difference.x = this.current.x - this.memory.x; 
02 2 this.difference.y = this.current.y - this.memory.y; 
034 // 替换 

035 if (this.current.x < tnis memory xy) 

036 this.inverse.x = this.current.x; 

本 itT (this current vy < this memorvy) 

038 this.inverse.y = this.current.y; 

039 h 

040 }); 

041 } 

042 | 上 





19.5.1 包含 和 使 用 Mouse 类 


只 需 将 该 代码 存储 在 mouse.js 中 ， 每 当 需 要 使 用 鼠标 坐标 时 就 实例 化 Mouse 类 ， 如 代码 清 
单 19-24 所 示 。 


代码 清单 19-24 ”使 用 Mouse 类 











Oo nemLl> 

002 <head> 

003 <title>Custom UI Project</title> 
004 <script type = "module"> 

yO 

006 import { Mouse } from "./mouse.jJs"; 
oo 

008 // 实例 化 全 局 鼠标 对 象 

009 Let mouse = new Mouse() ; 

010 

Oi // 在 代码 中 全 局 使 用 

012 mouse .current,.x; 

913 moOoUSe .CUrrent.y; 

014 

OS // 相对 于 文档 的 最 后 一 次 单 击 的 位 置 
016 mouse.memory .x; 

017 mouse.memory.y; 

018 

019 // 滑动 长 度 

920 mouse.difference.x; 
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go21 mousesgnmhelenmeEyV 
022 

023 // 移动 后 的 值 

024 mouse.inverse.x; 
O25 eusescnwese 
026 

027 // 当前 是 否 按 住 和 鼠标 ? (布尔 型 ) 
028 mouse.dragging,; 

W293 

030 </script> 

al </head> 

032 <body> 

033 <1-- UI //--> 

034 </body> 

035 .</html> 





19.5.2 解析 Mouse 类 





从 现在 起 ， 我 们 可 能 需要 的 所 有 坐标 都 会 被 自动 计算 出 来 ， 并 且 在 Mouse 类 的 实例 上 可 用 ， 
如 图 19-4 所 示 。 


mouse.inverse.x 
mouse.inverse.y 


当前 位 置 “距离 为 负 的 情况 ) 







上 次 单 击 的 位 置 
MOUSE .memory . 头 
MOUSEeE .memory .y 


当 本 位置 
mouse .current .x 
mouse.current.y 





图 19-4 计算 鼠标 坐标 
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mouse ,memory 属性 持 有 上 次 单 击 鼠标 的 位 置 。 根 据 布尔 型 变量 mouse.dragging 判断 ， 
如 果 用 户 按 住 鼠标 ， 那 么 mouse.difference 属性 将 保存 上 次 单 击 与 鼠标 指针 当前 所 在 位 置 之 
间 的 距离 。 


这 对 于 跟踪 目 定 义 的 滚动 条 或 滑 块 的 距离 非常 有 用 。 如 果 鼠 标 悬 停 在 滑 块 的 区 域 上 上， 用 户 
单 击 鼠 标 并 按 住 ,那么 滑 块 的 移动 距离 为 difference,x 属性 或 difference,y 属性 中 指定 的 值 ， 
这 取 雇 于 滑 块 是 水 平 的 还 是 垂直 的 。 


当 松 开 鼠 标 时 ， 所 有 的 属性 都 重 置 为 0。 


再 补充 一 下 mouse.difference 属性 为 负 时 的 情形 。 如 果 使 用 鼠标 在 屏幕 上 “绘制 ”矩形 ， 
而 与 上 一 个 单 击 位 置 相 比 距离 为 负 ， 那 么 mouse.inverse 属性 为 矩形 的 左上 角 。 如 果 距 离 向 量 
为 正 ， 那 么 左上 角 就 存储 在 mouse.memory 中 。 
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处 理 后 端 代码 的 应 用 程序 通常 通过 HTTP 请 求 进行 通信 。 本 章 将 探讨 几 种 方法 。 





要 启动 HTTP 请 求 ， 最 简单 的 方法 之 一 就 是 创建 XMLHttpRequest 对 象 的 实例 ， 如 代码 清 
单 20-1 所 示 。 


代码 清单 20-1 创建 XMLHttpRequest 对 象 的 实例 
001|const Http = new XMLHttpRequest() ; 











该 对 象 拥有 open 方法 和 send 方法 ， 而 在 调用 它们 之 前 ， 需 要 定义 端点 URL。 在 该 示例 中 ， 
我 们 只 需 从 CDN 上 下 载 jQuery 库 的 源 代 码 。 源 代码 可 以 是 任意 类 型 的 文件 。 请 看 代码 清单 20-2。 





代码 清单 2022 ”定义 端点 URL 


002 
es 


const url = 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"; 





现在 ， 可 以 使 用 GET 方法 或 POST 方法 来 调用 该 URL。 请 看 代码 清单 20-3。 


代码 清单 20-3 ”调用 URL 


Http.open("GET", url),; 
hee semnde ye: 


004 
ss 





为 了 获取 从 URL 端点 返回 的 实际 值 ， 需 要 监听 “状态 改变 ”事件 ,该 事件 会 在 返回 内 容 时 
立即 执行 ， 如 代码 清单 20-4 所 示 。 


代码 清单 20-4 ”监听 “状态 改变 ”事件 


007j// HTTP 请 求 响应 的 回调 号 数 

008 Http.onreadystatechange = function(event) { 
009 // 打印 core.js 的 内 容 

010 console.log(Http.responseText); 

On 
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你 所 创建 的 HITP 请 求 可 以 获取 几乎 所 有 类 型 的 数据 。 它 不 一 定 是 jQuery 库 。 通 常 ， 连 接 
的 API 会 将 返回 值 打 包 到 JSON 对 象 中 ,该 对 象 包含 一 个 项 目 列表 ， 应 用 程序 解析 该 列表 ， 并 
显示 在 UI 视 几 中。 这 通 并 编写 在 产品 代码 中 ， 如 代码 清单 20-5 所 示 。 


代码 清单 20-5 ”HTTP 请 求 的 示例 





001|const Http = new XMLHttpRequest(); 

002 

G03 | CEGnms 上 臣 yrl = "objectsj]s"s 

004 

005|j/ 监听 “状态 改变 ”事件 

006 Http.onreadystatechange = function() { 

007 

008 // 检查 请 求 是 否 成 功 

009 if (this.readyState == 4 && this.status == 200) { 
010 

011 // 读 取 JSON 格 式 的 内 容 

012 let json = JSON.parse(Http.responseText); 

013 console. tog( jsony: f/f [1 dt 2080, name: “Luma }] 
014 

015 // 从 对 象 中 提取 属性 

016 Let id = json.1d ; 

O17 Let name = json.name ; 

018 

019 // 使 用 接收 到 的 数据 来 更 新 应 用 程序 的 视图 

020 Let userId = document.getElementById("id"); 
OT if (userId) userId.innerHTML = 1d; 

022 

023 let userName = document.getElementById("name"); 
024 if (userName) userName .innerHTML = name ; 

OQ25 } 

026 | 二: 

Qa.7 

028 | // 执行 请 求 

92 [Http ,open(t GET, grl)s 

030 Http.send(); 














图 20-1 展示 了 objectjs 文件 的 内 容 ( 它 只 是 用 JSON 表示 法 表示 的 对 象 )。 请 注意 括号 [] 。 
To iO name Una | 
图 20-1 object.js 文件 
当 使 用 open 方 法 和 send 方 法 执行 HTTP 请 求 时 ,onreadystatechange 事 件 会 被 触发 4 次 。 


随 着 每 次 触发 ， 状 态 从 1 变 为 2， 再 变 为 3， 最 后 变 为 4。 我 们 只 关心 最 后 的 第 4 阶段 ， 这 时 请 
求 将 被 看 作 已 完成 ， 并 返回 200 状态 码 。 重 点 在 于 检查 this.status == 200。 这 是 因为 只 能 
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在 这 里 检查 事件 是 否 成 功 完成 。 


接 下 来 以 学 符 串 格式 接收 objectjs 文件 的 内 容 ， 即 上 面 的 JSON 对 象 。 但 我 们 需要 将 其 转 
换 为 JavaScript 对 象 。 这 可 以 通过 JSON.parse 方 法 来 实现 。 然 后 ， 我 们 将 json.id 属性 和 
json.name 属性 分 别 存 储 到 变量 id 和 name 中 。 最 后 ，id 和 name 的 内 容 显 示 在 应 用 程序 的 
UI 中 。 这 可 能 是 两 个 用 来 存储 该 数据 的 div 容 融 。 


如 果 接 收 到 多 个 JSON 对 象 ， 可 以 将 它们 转换 为 一 个 数组 (使 用 0bject.entries 方法 )， 
并 使 用 forEach 、map 或 其 他 的 高 阶 函 数 来 迭代 它们 。 在 该 示例 中 ，object.js 可 以 包含 多 个 对 象 ， 
它们 之 间 使 用 逗号 分 隔 ， 如 图 20-2 所 示 。 














[gmnanme Una ame ET 
图 20-2 ”包含 多 个 对 象 的 object.js 文件 
20.1 回调 地 狱 


回调 函数 是 在 执行 事件 后 返回 的 函数 。 可 以 编写 日 定义 的 代码 、 加 载 动 画 或 执行 清理 等 
操作 。 

在 ES6 之 前 ,回调 水 数 被 广泛 用 作 执 行 异步 调用 的 工具 。 随 着 应 用 程序 变 得 越 来 越 复 杂 ， 
每 个 回 再 函数 都 依赖 于 前 一 个 任务 的 完成 ， 因 此 这 些 回 调 也 数 会 被 链接 在 一 起 。 


洪 














Sallor AP| 


如 果 没 有 木头 ,就 无 法 建造 船只 ; 未 造 好 船只 , 就 无 法 出 海 ; 无 法 出 海 , 就 不 能 发 现 新 大 陆 ; 
未 发 现 新 大 陆 ， 就 不 能 挖掘 宝藏 | 


我 们 来 看 一 下 如 何 使 用 Sailor API 实现 一 系列 相互 依赖 的 操作 。 请 看 代码 清单 20-6。 
代码 清单 20-6 一 系列 相互 依赖 的 操作 








001|SailorAPI("/get/wood", (result) => { 

002 SailorAPI("/build/boat/", (result) => { 

003 SailorAPI("/sail/ocean/", (result) => { 

004 SailorAPI("/explore/island/", (result) => { 
005 SailorAPI("/treasure/dig/", (result) => { 
006 // 啊 …… 存 在 依赖 关系 的 异步 

007 jf 代码 好 丑陋 1 

008 上 

009 Eg 

010 Fs 

iT| 

O12|}2)} 
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以 这 种 方式 编写 的 调用 都 存在 依赖 性 的 问题 。 另 外 ， 如 果 有 一 个 API 调用 延迟 ， 那 么 每 个 
调用 之 间 都 可 能 会 产生 很 大 的 时 间 间 隔 ， 整 个 流程 就 会 显著 地 变 慢 。 难 道 异 步 代 码 不 是 同时 执 
行 的 吗 ? 


此 外 ， 在 每 个 回调 中 ， 我 们 都 必须 手动 检查 前 一 个 请 求 是 否 成 功 返 回 。 这 样 的 代码 会 非 背 
复杂 ,难以 阅读 。 这 种 丑陋 的 代码 通 当 被 称 为 回调 地 狱 。 我 们 怎样 才能 避免 它 呢 ? 

















20.2 Promise 


在 茶 些 情况 下 ， 如 琳 一 个 事件 依赖 于 为 一 个 事件 的 返回 结果 ， 那 么 使 用 回调 可 能 会 使 代码 
变 得 很 复杂 。Promise 对 象 提 供 了 检查 操作 失败 或 成 功 的 一 种 模式 。 如 于 成 功 ， 则 会 返回 万 一 


个 Promise。 








如 代码 清单 20-7 所 示 ，Promise 对 和 象 持 有 两 个 参数 : resolve 和 reject。 
代码 清单 20-7 Promise 对 象 的 示例 


001|Let password = "felix"; 

002 let p = new Promise((resolve, reject) => { 
003 if (password != "mathilda") 

004 return reject('Invalid Password'); 

005 resolve(); 

006|}); 








Promise 的 内 在 逻辑 完全 由 你 来 决定 。 如 以 上 示例 所 示 ， 假设 正在 验证 密码 ， 你 将 决定 是 
调用 resolve 命令 还 是 调用 rej ect 命令 。 在 实现 完整 的 Promise 之 前 ， 先 分 别 介 绍 resolve 


和 reject。 





20.2.1 Promise.resolve 





resolve 方法 表示 Promise 已 成 功 ， 并 包含 返回 值 。 例如， 它 可 以 是 字符 串 ， 如 代码 清 
单 20-8 所 示 。 


代码 清单 20-8 ” Promise 被 解析 为 字符 串 (1 ) 
001|1// 解析 为 "message" 


002|let promise = Promise.resolve("message"); 


同样 ， 代 码 清单 20-9 中 的 Promise 被 解析 为 "resolve value"， 从 技术 上 来 讲 ， 这 可 以 
是 字符 串 、 数 字 ， 甚 至 男 一 个 Promise。 


代码 清单 20-9 Promise 被 解析 为 字符 串 (2) 


00 可 promise = Promise.resolve("resolve value"); 
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1. then 





then 方法 接收 resolve 方法 的 啊 应 作为 成 功 时 的 值 。 如 代码 清单 20-10 所 示 ，then 方法 
接收 "resolve value" 消 朋 。 


代码 清单 20-10 ”then 方法 接收 resolve 的 值 


001 let promise = Promise.resolve("resolve value"); 
002 
003 // then 方 法 接收 resolve 的 值 

004 promise.then(function(message) { 
005 console.log("then: " + message); 
006|}); 





控制 台 输 出 如 图 20-3 所 示 。 





then: resolve value 


> | 


图 20-3 ”控制 台 输 出 





2. catch 


catch 方法 只 啊 应 reject 方 法 。 以 下 示例 不 会 执行 catch 方法， 因为 我 们 只 调用 
resolve 方法 本 身 。 但 是 ， 我 们 可 以 附加 一 个 回调 来 捕获 错误 ， 如 代码 清单 20-11 所 示 。 


代码 清单 20-11 catch 方法 
008 // 从 未 调用 ， 为 我 们 使 用 resolve 方 法 


009 promise.catch(function(error) { 
010 console.log("catch: ”+ error); 
OU 





3. finally 








如 代码 清单 20-12 所 示 ， 不 管事 件 是 成 功 (调用 resolve 方法 ) 还 是 失败 (调用 reject 
方法 )， 都 会 执行 finally 方法 。 最 好 是 在 这 里 清理 代码 或 更 新 UI 视图 ( 如 隐藏 加 载 的 动画 )。 








代码 清单 20-12 ”finally 方法 


013 | // 清除 Promise 之 后 的 数据 的 最 佳 位 置 

014 promise.finally(function(msg) { 

Qs console.log("finally: hide loading animation."); 
O16|T7 3 
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20.2.2 Promise.reject 


如 果 因 为 某 个 条 件 没有 得 到 满足 ， 而 导致 Promise 唱 到 拒绝 ,会 怎么 样 呢 ? 请 看 代码 清 
单 20-13。 


代码 清单 20-13” ”Promise 被 拒绝 的 情形 


001|1// Promise 对 象 也 有 一 个 reject 方 法 ， 

002 // 当 指 定 的 条 件 不 满足 时 ， 用 来 清除 请 求 

003| let promise = Promise.reject('"request rejected"); 
004 
005 // 不 会 对 reject 调 用 then 方 法 
006 
TO 

008 // 所 以 可 以 使 用 catch 来 捕获 错误 
009 promise.catch(function(error) { 
010 console.log("catch: ”+ error); 
Qa 








如 代码 清单 20-14 所 示 ， 在 这 里 我 们 成 对 使 用 reject 方法 和 catch 方法 ， 不 会 对 reject 
动作 调用 then 方法 ,但 最 终 会 调用 finally 方法 。 


代码 清单 20-14 finally 方法 


013 | // 清除 Promise 之 后 的 数据 的 最 佳 位 置 

014 promise.finally(function(msg) { 

Os console.log("finally: hide Loading animation."); 
O16 





20.2.3 组 产 


由 于 Promise 会 返回 Promise 对 象 ， 因 此 我 们 可 以 用 一 条 语句 实现 所 有 内 容 ( 见 代码 清 
单 20-15 )。 


代码 清单 20-15 ”用 一 条 语句 实现 Promise 











001 let promise = new Promise(function(resolve, reject) { 
002 let condition = true; 

003 // 这 里 基于 你 的 逻辑 

004 1f _ (condition) // 册 用 resoLve， 解 决 Promise 

005 resolve("message"); 

006 else // 调用 reject， 拒 绝 Promise 

007 reject("error details"); 

008 |}).then(function(msg) { 

009 console.log("promise resolved to " + msg); 
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010,}).catch(function(error) { 


oll 


console.log("promise rejected with " + error) 


012 }) .finaLLy(() => console.log("finally.") ); 


以 下 模式 稍 有 不 同 。 为 了 让 代码 更 整洁 ， 你 或 许 希 望 将 Promise 的 调用 与 then 和 catch 
的 调用 分 开 ( 见 代 码 清单 20-16 )。 


代码 清单 20-16 将 Promise 的 调用 与 then 和 catch 的 调用 分 开 


ool 
QUzZ 
003 
004 
O05 
006 
Q07 
008 
Qs 
O010 
a ei 
012 
加 
014 
Os 
016 
gy 
018 





Let takeTheTrashOut = new Promise(resolve, reject) => { 


// 执行 作业 


Let trash_is_out = take_trash_out(); 


// 处 理 返回 值 

TT (Lrash ns out) 
reject("No"); 

else 
resolve("Yes"); 


}); 


// 使 用 then 方 法 和 catch 方 法 来 解决 Promise 
takeTheTrashOut.then(function(fromResolve) 


console.log("Is the trash out? Answer = " + fromResoLve) ; 
}).catch(function(fromReject) { 
console.log("Is the trash out? Answer = " + fromReject); 


}); 


20.2.4 Promise.all 


与 HTTP 请 求 不 同 ，Promise 可 以 处 理 任意 语句 ， 包 括 简 单 的 变量 值 。 这 样 一 来 ， 我 们 可 
以 只 调用 Promise.all 一 个 方法 ， 同 时 处 理 多 个 Promise， 如 代码 清单 20-17 所 示 。 


代码 清单 20-17 ”同时 处 理 多 个 Promise 


001 
002 
003 
004 
QQS 
006 
G7 
008 
Uy09 
O010 





var promise = "promise"; 

var threat = "threat"; 

var wish = Promise.resoLve("I wish.") ; 
// 数据 集 

var array = [promise, threat, wish]; 


Promise.all( array ).then(function( values ) { 
console.log( values ) ; 


}); 
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O011 


012 // 返回 Array(2) 
OL Promse A neat YY wisn ls 


20.2.5 Promise 解析 


请 看 图 20-4。 


py “< 
resolve 





return 












fnaly> 
reject return 
可 








图 20-4 Promise 解析 


20.2.6 Promise 小 结 


在 许多 情况 下 ,通常 使 用 如 代码 清单 20-18 所 示 的 模式 。 
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代码 清单 20-18 Promise 的 使 用 模式 


001 new Promise((resolve, reject) => { resolve("resolved."); }) 
002 .then((msg) => { console.log(msg) }) 

003lmeatehn( (error y= ”> 7) 

004| .finally(() => { console.log("finally.") }); 





20.3 axios 


axios 是 一 个 比较 流行 的 基于 Promise 的 库 ， 可 用 于 访问 数据 库 ， 如 图 20-5 所 示 。 


npm 1TnstaLL ax1os --Save 


图 20-5” 安装 axios 











使 用 以 上 命令 将 其 安装 到 节点 服务 硕 上 。 然 后 ， 直 接 在 JavaScript 文件 中 导入 axios， 如 代 
码 清单 20-19 所 示 。 
代码 清单 20-19 ”导入 axios 


00 
或 者 直接 将 其 甬 和 人 到 HTML 页 面 中 ， 如 代码 清单 20-20 所 示 。 


代码 清单 20-20 将 axios 般 入 到 HIML 页 面 中 


001|l<script src = 
002 "https://unpkg.com/axios/dist/axios.min.Js"></script> 


如 代码 清单 20-21 所 示 ， 现 在 我 们 就 有 了 一 个 端点 /get/posts/。 


代码 清单 20-21 创建 端点 


001jconst url = 'http://exampleurl/endpoint/get/posts'; 
002 
003 ,axios.get(url) 

004 .then(data => console. log(data)) 
005 .Ccatch(err => console.log(err)); 





axios 这 循 上 一 节 介 绍 过 的 Promise 模式 。 令 人 恢 讶 的 是 ， 仅 此 而 已 。 你 可 以 使 用 axios 提 
其 巧妙 的 解决 方案 ， 来 访问 API。 


20.4 Fetch AP| 


内 置 的 Fetch API 提供 了 另 一 种 基于 Promise 的 接口 ， 来 访问 Web 服务 器 ， 如 代码 清单 20-22 
所 示 。 
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代码 清单 20-22 Fetch API 


001|Let loading_animation = true; 
Uy02 
003 fetch(request).then(function(response) { 

004 var type = response.headers.get("content-type"); 
005 if (type && type.includes("application/json")) 


006 return response.json() ; 
007 throw new TypeError("Content 1s not in JSON format."); 
008|}) 


009 .then(function(json) { /x* 这 里 处 理 JSON x*x/ }) 
010| .catch(function(error) { console.log(error); 上) 
ool rinalLly(functromn toadine amnmmation =alse qh) 





20.5 获取 POST 负载 


当 应 用 程序 需要 访问 数据 库 服务 器 时 ， 你 会 发 现 自己 正在 端点 发 送 和 接收 数据 。 端 点 只 是 
执行 特定 操作 的 URL 地 址 。 它 的 功能 是 由 API 服务 器 决定 的 。 它 通常 是 包含 多 个 端点 的 整个 
API 的 一 部 分 。 例 如 ，/get/messages 可 以 是 端点 ， 返 回 一 个 包含 消息 的 JSON 对 象 。 


有 两 种 常见 的 请 求 方式 : POST 和 GET。 当 使 用 POST 时 ， 我 们 可 以 附加 一 个 负载 对 象 ， 
来 传递 详细 信息 。 我 们 来 执行 一 个 POST 请 求 ， 获 取消 息 ， 不 过 只 针对 ID 为 12 的 用 户 Felix， 
如 代码 清单 20-23 所 示 。 


代码 清单 20-23 ”执行 POST 请 求 

















001jconst url = "http://exampleurl/endpoint/get/messages"; 
og323|const data = 二 names "Felix",s 1d;: 12 了， 

003|const params = { 

004 headers: { 

005 "'content-type": "application/json" 

006| }, 

007 body: data, 

008 method: "POST" 

009|} 


请 求 回 调 如 代码 清单 20-24 所 示 。 
代码 清单 20-24 ”请 求 回 调 


001 const callback = function(response) { 
002 var type = response.headers.get("content-type" ) ; 
003 if (type && type.includes("application/json")) 











004 return response.json() ; 
005 throw new TypeError("Content 1s not in JSON format."); 
006 } 
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最 后 调用 带 有 url 和 params 的 fetch 方法 ， 如 代码 清单 20-25 所 示 。 


代码 清单 20-25 ”调用 fetch 方法 


008 fetch(url, params).then(callback) 

009 .then(function(json) { /x* 这 里 处 理 JSON */ }) 
010|,.catch(function(error) { console.log(error); }) 
alrelftnatuly(founetron( Loadimne animationmn = talse sl),. 





20.6 async/awalt 


基于 Promise 的 代码 与 一 般 的 回调 存在 类 似 的 问题 。 毕 竟 then、catch 和 finally 从 根 
本 上 来 说 仍 是 回调 函数 。Promise 只 是 将 回调 分 割 成 广义 的 可 预测 结果 ， 使 代码 更 整洁 。 


这 意味 着 仍 有 可 能 陷入 Promise 地 狱 ， 而 不 是 回调 地 狱 。Promise 是 改善 这 种 情况 的 一 种 
很 好 的 尝试 ， 而 使 用 async 会 让 代码 更 简洁 。 
20.6.1 async 关键 字 的 基础 

我 们 先 来 看 一 下 调用 两 个 函数 时 的 情形 。 请 看 代码 清单 20-26。 





代码 清单 20-26 ”调用 两 个 函数 


OOTTIIEUmcTOmEx LE 
G02| Tunctior yy 1 3} 
oe 
004|y(); 





如 图 20-6 所 示 ， 孙 数 y 会 在 函数 x 返回 后 立即 执行 。 


返回 


图 20-6 调用 两 个 也 数 





不 出 预料 ， 异 步 代码 在 前 一 个 命令 执行 完成 后 按 顺 序 执行 ， 而 非 两 个 函数 同时 执行 。 
现在 ， 我 们 看 一 看 使 用 async 关键 字 时 的 情形 。 


由 于 async 关键 字 只 能 用 于 负数 ， 因 此 只 能 在 函数 的 定义 之 前 添加 async， 如 代码 清单 20-27 
所 示 。 
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代码 清单 20-27 使 用 async 关键 字 定 义 函 数 


001| async fuUnecEIonaa Eretunrnme ss 


我 们 正在 试 着 摆脱 前 面 介绍 的 Promise 模式 。 尽 管 是 这 样 ， 但 async 旺 数 现在 实际 上 返回 
了 一 个 Promise 对 象 。 我 们 正在 打破 Promise 地 狱 模式 ， 以 追求 更 整洁 的 代码 。 而 我 们 仍然 可 
以 对 函数 调用 then 方法 ， 如 代码 清单 20-28 所 示 。 


代码 清单 20-28 调用 then 方法 


oe ee el TT] Te -0 eT- 


控制 台 输 出 如 图 20-7 所 示 。 





1 
> | 


图 20-7 控制 台 输 出 





请 记 住 ，then 方法 的 第 一 个 参数 是 解决 函数 ， 第 二 个 参数 是 拒绝 函数 。 因 此 ， 当 我 们 传人 
第 一 个 参数 console.1o0g 时 ， 它 将 被 看 作 执 行 显示 结果 的 函数 。 


实际 上 ， 代 码 清单 20-29 中 的 两 个 示例 除了 返回 的 字符 串 不 同 之 外 ， 完 全 相同 。 
代码 清单 20-29 ”两 个 陶 数 的 动作 相同 


O001 
002 


asvmne unmetion a recurnmn Trioet 
async function b() { return Promise.resolve("second"); } 





尽管 子 数 a 未 显 式 指定 ,但 这 两 个 函数 都 返回 Promise ! 如 代码 清单 20-30 所 示 ， 我 们 调 
用 这 两 个 函数 ， 然 后 对 返回 值 调 用 then。 
代码 清单 20-30 调用 then 方法 


001 
002 


a() .then(console. log); 
b().then(console. log); 





到 目前 为 止 ， 络 东 符 合 预期 ( 见 图 20-8 )。 


first 
second 
> | 
图 20-8 ”控制 台 输 出 
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20.6.2 awalit 


await 适合 什么 情形 呢 ? async 和 await 通常 一 起 使 用 。await 关键 字 位 于 async 困 数 的 
开头 ， 如 代码 清单 20-31 所 示 。 
代码 清单 20-31 await 关键 字 


00 asymneniumesonna NN waneMaen sae em 
002SsYyne Tunetion bt) 4 return "second™, | 


注意 : 在 async 函数 的 外 部 使 用 await 会 发 生 错 误 。 
在 这 里 ， 我 们 将 await 添加 到 计算 1 的 平方 根 的 简单 数学 运算 中 。 但 重要 的 是 ， 现 在 函数 
b 会 先 返回 ， 尽 管 它 在 执行 顺序 中 是 第 2 个， 如 代码 清单 20-32 和 图 20-9 所 示 。 


代码 清单 20-32 ”调用 then 方法 


001|1a() .then(CconsoLe.Log) ; 
002|b() .then(CconsoLe.Log) ; 


控制 台 输 出 如 图 20-9 所 示 。 





second 
first 
> | 
图 20-9 ”控制 台 输 出 





在 语句 的 前 面 加 上 await， 该 语句 会 像 Promise 一 样 执 行 。async 函数 中 的 执行 流程 将 在 
该 语句 处 暂停 ， 直 到 其 状态 变 为 fulfilled 为 止 。 这 意味 着 return "first" 并 不 会 像 b 函数 
那样 立即 返回 。 


这 只 是 一 个 简单 的 演示 示例 。 在 实际 中 ，await 主要 是 处 理 多 个 API 端点 的 最 优 解决 方案 。 
关于 async/await， 最 重要 的 是 它 允 许 同步 执行 程序 中 以 异步 形式 编写 的 代码 。 这 人 解决 了 回 
调 地 狱 的 所 有 问题 ， 保 持 了 代码 整洁 ， 同 时 可 以 高 效 执行 多 个 API 请 求 。 最 好 的 演示 方法 是 将 
await 放 在 try-catch 语句 的 语 境 中 。 下 一 市 将 进行 介绍 。 








20.6.3 async/await 中 的 try-catch 





来 看 以 下 示例 ， 其 中 ，async 和 await 用 于 获取 用 户 信 息 的 对 象 ， 如 代码 清单 20-33 所 示 。 
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代码 清单 20-33 async/await 中 的 try-catch 


001 const get = async function(username, password) { 
002 Cw 4 

003 const user = await API.get.user(username, password); 
004 const roles = await API.get.roles(user); 
005 const status = await API.get.status(user); 
006 return USer ; 

007 } catch (error) { 

008 // 发 生 错 误 时 进行 处 理 

009 console.log(error); 

010 } 

了 | 于 

1] 有 2 

013|const userinfo = get(); // 获取 用 户 信 息 











我 们 会 一 直 等 到 API.get.user 生成 一 个 值 并 将 其 存储 在 user 变量 中 。 在 此 之 前 ,后面 
的 await 语句 不 会 执行 。 这 是 理想 的 方式 ， 因 为 后 面 的 两 条 await 语句 需要 user 对 象 ， 只 有 
在 对 用 户 验证 通过 之 后 ， 该 对 象 才 可 以 使 用 。 


如 代码 清单 20-34 所 示 ， 假如 API.get.user 失败 ，API,get.rotes 和 API.get.status 
会 目 动 失败 ， 并 返回 空 对 象 。 


代码 清单 20-34 ”获取 用 户 信 息 失 败 的 情形 











001 ,1f (getinfo != null) { 

002 Let roles = getinfo.roles; 
003 } else { 

004 // 用 户 名 或 密码 错误 

005|} 





20.6.4 小结 


async/await 语法 是 JavaScript 中 同步 编程 的 典范 。 使 用 async 修饰 的 函数 可 以 便捷 地 返 
回 Promise 对 象 。 这 里 实现 了 两 方 兼 顾 。 我 们 的 函数 虽然 采用 异步 顺序 ， 但 执行 是 同步 的 ， 就 
像 回 调 、Promise 或 获取 API 请 求 一 样 。 我 们 终于 逃离 了 回调 地 狱 和 Promise 地 狱 ， 并 保持 了 
代码 整洁 。 

这 是 否 意 味 着 必须 放弃 对 Promise 对 象 使 用 new 运算 符 ” 当然 不 是 。 本 章 中 的 所 有 技术 都 


能 够 用 来 编写 成 功 的 应 用 程序 。 这 取决 于 你 选择 的 设计 。async/await 关键 字 使 我 们 可 以 同步 
了 代码 ， 而 无 须 直 接 使 用 回调 或 Promise， 也 无 须 修改 代码 的 异步 性 质 。 
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20.7 生成 怖 


生成 器 类 似 于 async。 虽 然 它 早 于 async 关键 字 出 现 ， 但 它们 共享 类 似 的 模式 。 这 里 之 所 
以 介绍 生成 硕 ， 是 因为 它 在 JavaScript 代码 中 仍然 较为 稼 见 。 


生成 带 可 以 通过 向 函数 定义 中 深 加 星 号 (* ) 来 定义 ， 如 代码 清单 20-35 所 示 。 
代码 清单 20-35 ”生成 器 的 定义 


001|functionx generator() { } 











生成 名 还 可 以 通过 匿名 函数 的 定义 赋值 进行 创建 〈 见 代码 清单 20-36 )。 
代码 清单 20-36 ”通过 匿名 函数 的 定义 赋值 来 创建 生成 名 


00 WE generator = functionx() {} 


20.7.1 yileld 





就 像 async 与 await 一 起 使 用 一 样 ， 生 成 磊 与 yield 一 起 使 用 ， 以 实现 与 前 一 组 完全 相同 
的 效果 ， 如 代码 清单 20-37 所 示 。 


代码 清单 20-37 使 用 yield 的 情形 


001| let generator = function*() { 
002 Viald 1 

003 yield 2; 

004 yield 3; 

005 yield "Hello"; 

006 return "Done."; 

yom 





但 我 们 不 能 直接 调用 generator 吻 数 。 每 当 我 们 这 样 做 时 ， 它 都 会 重 置 为 第 一 条 yield 语 
句 。 另 外 ， 一 个 生成 需 只 能 使 用 一 次 ， 它 在 返回 后 不 可 以 再 次 调用 。 


因此 ， 初 始 化 新 生成 融 的 正确 方法 是 变量 赋值 ， 如 代码 清单 20-38 所 示 。 
代码 清单 20-38 初始 化 新 生成 大 


00 








与 Promise 对 象 的 then 方法 相似 ， 生 成 豆 持 有 next 方法 。 只 要 对 生成 套 调 用 next， 就 
会 执行 生成 器 函数 体 中 的 下 一 条 yietLd 语句 ， 如 代码 清单 20-39 所 示 。 





代码 清单 20-39 next 方法 


001|gen.next(); // {ivalue: 1, done: faLse} 
002 gen.next(); // {value: 2, done: faLse} 
003|gen.next(); // {value: 3, done: faLse} 
004 gen.next(); // {value: "Hello", done: faLse} 
005|gen.next(); // ivalue: “Done."”", done: truel} 








生成 需 不 需要 返回 值 ， 但 如 果 有 返回 值 ， 那 么 它 将 被 视 为 最 后 一 个 值 。 请 注意 ，next 会 生成 
一 个 对 象 ， 如 {value: 1，done: false}， 而 不 是 返回 值 。 最 后 一 条 语句 会 返回 done: true。 


在 这 之 后 ， 生 成 句 不 能 重新 使 用 ， 应 该 将 其 丢 穿 。 符 要 创建 新 的 生成 需 ， 请 重新 为 generator 





20.7.2 ”捕获 错误 
我 们 可 以 使 用 throw 方法 来 捕获 生成 器 的 错误 ( 见 代 码 清单 20-40 )。 
代码 清单 20-40 ”使 用 throw 方法 捕获 生成 器 的 错误 





001|functionx generator() { 

002 try 

003 yield 工 ; 

004 yield 2; 

005 yield 3; 

006 + ateh(errgr) 4 

007 console. log("Error caught!’", error): 
008 } 

009 | 上 

010 

011| let g = generator() ; 

1 

013|jg.next(); // {value: 1, done: faLse} 

014 g.next(); // {value: 2, done: faLse} 
015|jg.next(); // {value: 3, done: faLse} 

O16 

017|g .throw(Cnew Error('Something went wrong')); 





在 生成 器 函数 中 ， 请 确保 使 用 try-catch 分 支 语句 。 如 果 已 经 执行 了 一 条 yield 语句 ， 就 
会 抛 出 错误 。 当 然 ， 在 实际 中 ，yieLd 1、yield 2 和 yield 3 可 以 是 更 有 意义 的 语句 ， 比 如 
API 调用 。 











事件 循环 


作为 JavaScript 程序 员 ， 虽 然 你 无 顷 了 解 事件 循环 的 实际 实现 ， 但 是 了 解 它 的 工作 方式 还 是 
很 重要 的 ， 这 至 少 有 下 述 两 个 原因 。 


首先 ， 面 试 家 经 名 会 问 到 与 事件 循环 相关 的 问题 。 


其 次 ， 通 过 了 解 事件 循环 的 工作 方式 ， 就 能 够 理解 事件 的 发 生 顺 序 。 例 如 ， 使 用 回调 和 
setTimeout 也 数 等 计时 右 。 这 个 原因 更 具有 实践 意义 。 


前 文 介 绍 了 函数 在 执行 时 如 何 放置 在 调用 栈 上 。 我 们 甚至 可 以 使 用 栈 追 踪 ， 以 追踪 错误 最 初 
是 由 于 调用 哪个 也 数 引 起 的 。 这 在 处 理 确定 性 事件 集 (语句 在 前 一 条 语句 完成 执行 后 立即 执行 ) 
时 很 有 意义 。 

JavaScript 代码 通 稼 是 基于 监听 事件 编写 的 ， 如 计时 融 、 鼠 标 单 击 和 HTTP 请 求 等 。 事 件 在 
完成 要 执行 的 任务 后 、 返 回 之 前 会 有 一 段 等 竺 时间。 但 是 ， 当 事件 执行 时 ， 我 们 并 不 希望 主 程 
序 仓 止 。 因 此 ， 只 要 事件 发 生 ， 它 就 会 被 移交 给 事件 循环 〈 见 图 21-1 )。 




















图 21-1 事件 循环 示意 图 
顾名思义 ,事件 循环 可 以 被 抽象 地 看 作 一 个 循环 ”, 这 是 一 个 不 断 循环 的 过 程 ( 见 图 21-2 )。 


QO 事件 循环 示意 图 受 Jake Archibald 的 启发 。 


第 21 章 事件 循环 207 


-» 


图 21-2 事件 循环 示意 图 


一 旦 事件 发 生 (这 可 以 看 作 一 个 任务 ), 它 就 被 委托 给 事件 循环 ,而 事件 循环 会 “不 遗 余力 ” 
地 接收 任务 ( 见 图 21-3 )。 


任务 


图 21-3 事件 循环 示意 图 


但 事情 并 不 是 这 么 简单 。 事 件 循 环 不 仪 会 处 理 鼠 标 单 击 和 超时 等 事件 ， 还 需要 注意 更 新 浏 
览 需 视图 ( 见 图 21-4 )。 














requestAnimationFrame 
布局 (位置) 


像素 级 演 染 





图 21-4 事件 循环 示意 图 
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事件 循环 的 流程 持续 循环 ， 有 时 会 花费 时 间 来 处 理 任务 或 更 新 钢 网 。 用 户 与 前 闯 应 用 程序 
交互 的 整体 体验 通常 取决 于 事件 循环 代码 的 优化 程度 。 为 了 提供 流畅 的 用 户 体验 ， 编 写 代 码 时 
应 该 权衡 任务 处 理 和 屏幕 更 新 。 


在 现代 浏览 句 中 ， 更 新 视图 通常 分 为 4 个 步骤 : 检查 requestAnimationFrame、CSS 样式 
计算 、 确 定 布局 位 置 和 演 染 视图 (实际 绘制 像 双 )。 确 定 更 新 浏 览 需 的 时 机 是 很 环 手 的 工作 。 毕 
范 ，SetTimeout 或 setInterval 不 应 该 与 泻 染 浏览 大 视图 一 起 使 用 。 如 果 使 用 它们 来 制作 动 
画 元 素 ， 其 性 能 会 很 不 稳定 。 


这 是 因为 setInterval 会 尽 可 能 快 地 执行 回调 ( 许多 人 在 其 中 放置 了 动画 代码 )， 以 支持 
事件 循环 。 因 此 ， 许 多 人 已 经 将 可 以 在 CSS 中 实现 的 动画 移动 到 各 目的 CSS 样式 定义 中 ， 而 不 
是 在 JavaScript 中 执行 。 





























不 过 ， 使 用 requestAnimationFrame 可 以 提高 稳定 性 。 实 际 上 ， 事 件 循 环 会 与 显示 船 的 
刷新 率 同 步 ， 而 不 是 在 setInterval 每 次 触发 回调 晒 数 时 执行 。 





用 梳 


22.1 什么 是 调用 栈 


调用 栈 用 于 追踪 当前 正在 执行 的 函数 。 当 代码 执行 时 ， 每 个 调用 虱 按 其 在 程序 中 出 现 的 顺 
序 放置 在 调用 栈 上 。 在 函数 返回 后 ， 它 就 会 从 调用 栈 中 移 除 。 


将 函数 调用 放 到 栈 上 被 称 为 推 入 ,将 其 从 调用 栈 中 移 除 被 称 为 弹出 。 其 思想 与 Array .push 
和 pop 方法 相同 。 请 看 图 22-1、 图 22-2 和 图 22-3。 


an 


图 22-1 主 入口 点 被 推 入 调用 栈 











console.log(1) 





图 22-2 每 次 调用 console.1o0g 时 ， 它 部 会 被 推 入 调用 栈 


[0 


图 22-3 consote,.Log 将 工 打印 到 控制 台 并 返回 。 然 后 从 调用 栈 中 弹出 。 主 晒 数 继续 运行 ， 
直至 返回 。 这 通常 发 生 于 关闭 浏览 磊 时 





在 编码 中 运用 调用 材 


调用 栈 是 计算 机 语言 设计 的 基本 组 成 部 分 ， 大 多 数 语 言 会 以 菏 种 方式 实现 调用 栈 。 它 如 何 
适用 于 只 编号 代码 而 不 设计 计算 机 语言 的 人 呢 ? 
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调用 栈 示 例 








复杂 的 任务 优先 级 较 高 。 许 多 任务 需要 按 逻 辑 顺 序 来 完成 。 


编写 软件 时 ,通常 会 在 孔 数 的 主体 中 调用 为 一 








而 只 有 下 定 决 心 打 扫 房 间 ， 你 才 有 理由 打 一 桶 水 。 请 看 代码 清单 22-1。 


代码 清单 


Uo 
002 
003 
004 
SS 
006 
oy 
008 
09 
010 
0 
012 
V13 
014 
Joes 
016 


绩效 mop_floor 会 抛 出 一 个 错误 。 这 





22-1 调用 clean house 触发 一 系列 的 函数 调用 


funecetion mop floor(y Tt 
console.log("Mop the floor."); 
throw new Error("Ran out of water!"); 


function fill bucket(what) { 
console.log("Filling bucket with " + what); 
mop_fLoor() ; 





function clean_house() { 
console.log("Cleaning house.") ; 
fiLL_bucket("water'" ) ; 

} 


clean_house(); 





Cleaning house. 
Filling bucket with water. 
Mop the floor. 


> Uncaught Error: Ran out of water! 
at mop _ floor 
at fill bucket 
at clean house 


> | 


错误 会 从 发 生 错 误 的 函数 mop_floor 开始 ， 显 示 调 用 栈 的 历史 追踪 信息 。 在 调试 时 ， 


图 22-4 调用 栈 会 帮助 我 们 确定 错误 的 根源 


助 于 追 踩 错误， 直至 最 初 的 晒 数 clean house。 


时 ? 控制 台 将 显示 栈 追 踪 信 息 ? 如 图 22-4 所 示 O 


-个 函数 。 举 个 例子 :只 有 打 一 桶 水 ,你 才能 拖 地 ; 


这 有 
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里 然 在 大 多 数 情况 下， 编码 无 须 考 不 栈 退 踪 ,但 是 在 调试 复杂 的 大 型 软件 时 ， 你 可 能 逢 要 


22.2 执行 语 境 


调用 栈 是 执行 语 境 的 栈 。 我 们 在 讨论 前 者 时 ， 会 不 可 避免 地 涉及 后 者 。 虽 然 在 编写 
JavaScript 代码 时 并 不 需要 非常 详细 地 理解 执行 语 境 或 调用 栈 ， 但 是 理解 它们 有 助 于 更 好 地 理解 


该 语言 。 


22.2.1 什么 是 执行 语 境 


当 程 序 继续 运行 时 ， 执 行 的 语句 与 执行 语 境 共存 。 请 注意 ， 在 每 个 作用 域 中 ，this 关键 字 指 
占据 行 语 境 ， 这 并 不 仅 限于 函数 作用 域 。 块 级 作用 域 还 通过 this 关键 字 持 有 到 执行 语 境 的 链接 。 


这 第 第 会 引起 混淆 ， 因 为 在 JavaScript 中 ，this 关键 字 还 用 作 类 定义 中 对 和 象 实例 的 引用 ， 
以 便 我 们 访问 其 成 员 属 性 和 成 员 。 不 过 ， 如 末 我 们 理解 了 执行 语 境 是 由 对 象 的 实例 表示 的 ， 
那么 事情 就 会 变 得 很 明了 。 它 不 访问 实例 的 属性 或 方法 ， 而 建立 跨 多 作用 域 的 代码 流 之 间 的 
链接 。 




















22.2.2 根 执 行 语 境 


程序 在 浏览 器 中 打开 时 ， 会 自动 创建 一 个 window 对 象 的 实例 。 该 window 对 象 会 成 为 根 执 
行 语 境 ， 因 为 它 是 由 浏览 硕 的 JavaScript 3 引 敬 本 号 实例 化 的 第 一 个 对 象 。window 对 象 是 全 局 作 
用 域 的 执行 语 境 ， 它 们 引用 的 内 容 相 同 。window 对 和 象 是 Window 类 的 实例 。 





22.2.3 工作 方式 


如 宁 从 全 局 作用 域 调用 函数 ， 那 么 函数 作用 域 中 的 this 关键 字 将 指 疝 window 对 象 ， 这 是 
调用 上 函数 的 语 境 。 该 十 境 被 市 人 函数 的 作用 域 。 这 就 像 是 建立 从 当前 的 执行 语 境 到 上 一 个 语 境 
的 链接 。 在 程序 生命 周期 的 代码 执行 流程 中 ， 执 行 语 境 从 一 个 作用 域 传递 到 为 一 个 作用 域 。 可 
以 将 其 看 作 一 个 树 分 支 ， 从 根 window 对 象 扩展 到 另 一 个 作用 域 。 


后 文 将 介绍 执行 语 境 和 调用 栈 之 间 的 关系 。 


22.3 ”代码 中 的 执行 语 境 


调用 栈 和 执行 语 境 的 迎 辑 ， 以 及 它们 对 程序 员 的 展示 方式 之 间 存 在 差异 。 显 然 ， 编 写 代 码 
不 需要 了 解 调用 栈 。 在 JavaScript 中 ， 与 处 理 执行 语 境 最 贴近 的 就 是 this 关键 字 。 
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在 每 个 作用 域 中 ，this 关键 字 持 有 执行 语 境 。 语 境 这 一 名 称 表明 它 是 可 以 改变 的 。 确 实 
如 此 。 在 各 种 情况 下 ， 每 个 作用 域 中 的 this 关键 字 会 发 生 改变 ， 或 指向 另 一 个 新 对 象 。 而 这 一 
切 从 哪儿 开始 呢 ? 








22.3.1 window 与 全 局 作用 域 


当 window 对 和 象 被 创建 时 ， 后 台 会 执行 一 些 操作 ， 创 建新 的 词法 环境 ， 其 中 包含 该 作用 域 
的 变量 环境 ( 内 存 中 存储 局 部 变量 的 位 置 )。 这 时 执行 第 一 次 this 绑 定 ， 如 图 22-5 所 示 。 


Var window = new Window!() 


th1is === window 


_E < 
变量 环境 








图 22-5 实例 化 主 窗口 对 象 将 创建 一 个 新 的 执行 语 境 。this 关键 字 指 向 该 窗口 对 象 


在 全 局 作用 域 中 ，this 关键 字 指 回 window 对 象 。 


22.3.2 ”调用 枝 


调用 栈 奶 踪 函 数 的 调用 。 如 果 从 全 局 作用 域 的 霹 境 调用 函数 ， 那 么 当前 语 境 的 “顶部 ”就 
会 增加 一 项 。 新 创建 的 栈 会 继承 之 前 环境 的 执行 请 境 。 


为 了 更 直观 地 了 解 上 述 内 容 ， 我 们 来 看 一 下 图 22-6。 


clean_house() 





th1is === window 


var window = new Window!() 


th1is === window 


图 22-6 调用 栈 上 跨 执行 语 境 的 this 对 象 的 绑 定 ， 调 用 函数 时 就 会 创建 新 的 栈 。 该 新 的 
语 境 会 被 置 于 调用 栈 中 上 一 个 对 象 的 “顶部 








22.3 ”代码 中 的 执行 语 境 用 
调用 栈 和 执行 语 境 链 
请 看 图 22-7。 










mop_floor() 









this === window 
fill _ bucket() 


th1is === window 





clean_house() 





th1s === window 


var window = new Window!() 


th1s === window 


图 22-7 当 更 多 相互 依赖 的 函数 从 其 他 函数 中 进行 调用 时 ， 栈 束 会 增多 


可 以 看 到 ， 语 境 传递 到 新 创建 的 栈 ， 并 通过 this 关键 字 保 持 可 访问 性 。 该 过 程 不 断 重复 ， 
并 维持 一 系列 的 执行 请 境 ， 直 至 当前 执行 请 境 ， 如 图 22-8 所 示 。 


请 注意 ， 每 个 函数 都 持 有 BC0 ~ EC3 的 自 有 执行 语 境 。 











总 会 存在 一 个 当前 正在 执行 的 语 境 。 这 就 是 栈 最 顶部 的 语 境 。 之 前 的 所 有 栈 都 在 下 面 ， 下 
至 执行 从 当前 语 境 返回 〈 因数 执行 完成 并 返回 ，JavaScript 会 从 内 存 中 删除 该 语 境 ， 我 们 也 不 再 
需要 它 )。 函 数 执行 完成 后 ， 该 栈 会 从 顶部 移 除 ， 代 码 流程 会 返回 至 璋 余 的 前 一 个 (最 上 面 的 ) 
执行 语 境 。 语 境 不 断 地 推 入 和 弹出 调用 栈 。 仪 当 从 一 个 函数 调用 男 一 个 函数 时 ， 才 会 创建 栈 。 
如 果 所 有 函数 都 从 同一 个 执行 语 境 执行 ， 则 不 会 创建 栈 。 在 调用 栈 中 ， 函 数 被 推 和 人 栈 中 ， 然 后 
从 栈 中 弹出 ; 接 下 来 下 一 个 图 数 将 被 推 入 空 栈 中 ……: 
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当 数 作用 域 








bl 
al) 





windows 


全 局 作用 域 












Window() 





<script> 
function a() {b(0); } 
function b() { c(;} 
function c() { } 


al); 
</script> 





图 22-8 ”从 彼此 的 作用 域 中 调用 多 个 函数 ,这 会 在 调用 栈 上 构建 一 个 函数 调用 塔 。 请 注意 ， 
如 果 从 全 局 作用 域 的 语 境 调用 所 有 的 函数 ， 那 么 每 次 只 能 调用 一 个 函数 


22.3.3 call、 bind 和 apply 


这 3 个 函数 可 以 用 来 调用 函数 ， 并 选择 this 关键 字 在 调用 函数 的 作用 域 中 指向 的 内 容 , 来 
禾 兰 其 软 认 的 动作 。 





22.3.4” 栈 汶 出 


当 把 你 最 辟 欢 的 办 打 水 倒 进 高 玻璃 杯 时 ， 它 会 失去 碳酸 化 作用 ， 如 于 容量 和 速度 足够 ， 它 
就 会 在 杯 口 冒 泡 。 


不 妨 以 类 似 的 方式 来 考虑 栈 溢出 。 玻 璃 杯 就 是 调用 栈 的 内 存 地 址 空间 ， 杯 口 的 气泡 就 是 无 
法 分 配 的 内 存 。 请 看 图 22-9。 
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mop_floor() 








this === window 
fill_bucket() 


this === window 







clean_house() 






th1is === windew 





var Window = new Window!() 


调用 栈 内 存 地 址 空间 








图 22-9 每 次 调用 函数 时 ， 都 会 在 内 存 中 创建 新 的 语 境 ， 但 内 存 并 不 是 无 限 的 。 当 创 建 调 
用 栈 所 宕 的 内 存 超过 为 栈 分 配 的 地 址 空间 时 ， 就 会 发 生 栈 溢 出。 该 内 存 大 小 是 由 
浏览 融 内 部 确定 和 管理 的 











es 


微 信 连接 





re a 


回复 “ 0 查看 相关 书 单 


微 博 连接 
关注 @ 图 灵 教 育 每 日 分 享 |T 好 书 


名 


QQ 连接 


图 灵 读 者 官方 群 I: 218139230 
图 灵 读 者 官方 群 II: 164939616 


图 灵 社 区 
iTuring.cn 
在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 , 图 灵 访 谈 


JavaScript 


二 法 人 简明 手册 


想 学 JavaScript， 但 不 想 “ 嘴 ”大 部 头 ? 
既 想 了 解 经 典 特性 ， 又 想 与 时 俱 进 ? 

拒绝 枯燥 ? 适合 视觉 型 学 习 ? 

以 上 需求 通通 满足 ! 





适合 零 基 础 入 门 
浅显 易 懂 ， 为 进 阶 打 好 基础 。 适 合 放 在 手边 ， 随 时 翻阅 。 


精 选 语法 要 点 ， 内 容 实用 
涵盖 党 用 特性 ， 如 模板 字符 串 、 简 头 销 数 、 对 象 解构 、 生 成 器 ， 以 及 ES10 新 增 
的 内 容 ， 包 括 基本 数据 类 型 bigint、 稳 定 的 数组 排序 算法 、 局 平 化 多 维 数 组 。 


彩色 代码 图 ， 重 点 突出 


超过 200 幅 彩色 代码 图 和 示意 图 ， 直 观 呈现 抽象 概念 ， 为 你 绘制 有 趣 的 
JavaScript 学 习 路 线 。 
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